Javascript 单击时多次调用同一函数

我有一个函数，它接受一个字符串，并以延迟的方式一次输出一个字符。当用户单击链接或按钮时发生该事件。问题是，如果用户在第一个链接完成之前先单击一个链接，然后再单击另一个链接，那么它们都会同时运行并输出到屏幕。它变得杂乱无章。 前任： string1：“我非常喜欢馅饼” string1：“下一个家伙也是” 输出：i sloi kdeo epse。。。。等等

有人知道解决这个问题的方法吗？

---

我想我需要一种方法来检查函数是否已经被处理，然后等到它完成后再开始下一个。

在名为

IsProcessing

的方法之外全局或范围内添加一个变量，并在第一次调用该方法时将其设置为true，然后在该方法上只需检查

if（IsProcessing）返回false
将两个函数都放在一个对象内（因为全局变量不好），向对象添加一个变量，该变量知道函数是否正在执行，并检查该变量，如下所示：

var ns = {
    isExecuting:false,
    func1: function(){
       if (this.isExecuting) { return; }
       this.isExecuting = true;
       //do stuff 1
       this.isExecuting = false;        
    },
    func2: function(){
       if (this.isExecuting) { return; }
       this.isExecuting = true;
       //do stuff 2
       this.isExecuting = false;        
    }
}

为了更加优雅：

var ns = {
    isExecuting:false,
    executeConditionally:function(action){
       if (this.isExecuting) { return; }
       this.isExecuting = true;
       action();
       this.isExecuting = false; 
    }
    func1: function(){
        this.executeConditionally(function(){
          //stuff
        })       
    },
    func2: function(){
        this.executeConditionally(function(){
          //stuff
        })
    }
}

您只需设置一个变量，该变量指示函数是否正在运行：

var isRunning = false;

$('a').click(function({
    if(isRunning == false){
         isRunning = true;
         ///Do stuff
         isRunning = false;
    }
    else{
         return false;
    }
});

你不想把所有的点击都考虑进去，但要按顺序吗？
如果是这样，我建议您将添加点击处理和消费点击之间的流分开
:

html：

<a class="example" href="javascript:void(0)" onclick="delayPushLine();">i like pie very much</a><br/>
<a class="example" href="javascript:void(0)" onclick="delayPushLine();">so does the next guy</a>
<div class="writeThere"></div>




和javascript（稍微使用jQuery）

var charDisplayDelay=50；//每个字符显示之间的时间间隔
var displayDelay=2000；//处理单击之前的时间
var行=[]；
变量lineIdx=0，位置=0；
功能延迟推线（e）{
如果（！e）{
e=窗口事件
}
setTimeout（function（）{lines.push（e.srcmelement.innerText）；}，displayDelay）；
}
函数显示行（）{
如果（lines.length>lineIdx）{
if（pos）；
}
}
}
setInterval（“showLines（）”，charDisplayDelay）；

对于使用闭包来避免污染页面的良好解释，我投了赞成票。谢谢，我尝试了一个更简单的版本，它似乎不适用于递归函数，但这是一个很好的方法开始。好的，我必须在每次递归调用之前将isRunning变量设置为false。它现在可以工作了，但是我考虑了更多的延迟第二个字符串的输出，如果根本不运行它的话。单击链接时运行的所有其他内容在单击时仍然有效。稍后我可能会对其重新编码，以停止延迟函数，并在用户再次单击时立即输出字符串的剩余内容。谢谢大家的帮助，尽管只是一个更新：我在我的按钮上使用了这个方法和settimeout函数的组合来修复这个问题。目前一切都运转良好。
var charDisplayDelay = 50; // the time between each char display
var displayDelay = 2000; // the time before a click is handled
var lines = [];
var lineIdx = 0, pos = 0;

function delayPushLine(e) {
    if (!e) {
        e = window.event
    }
    setTimeout(function() { lines.push(e.srcElement.innerText); }, displayDelay);
}

function showLines () {
    if (lines.length > lineIdx) {
        if (pos < lines[lineIdx].length) {
            $(".writeThere").append(lines[lineIdx].substr(pos,1));
            pos++;
        } else {
            pos = 0;
            lineIdx++;
             $(".writeThere").append("<br/>");
        }
    }
}

setInterval("showLines()", charDisplayDelay);