javascript - 单击时多次调用相同的函数

Question

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

有人知道解决这个问题的方法吗？我想我需要一种方法来检查函数是否已经被处理，然后等到它完成后再开始下一个。

Answer 1

将这两个函数都放在一个对象中（因为全局变量不好），向对象添加一个知道函数是否正在执行的变量，然后检查变量，如下所示：

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
        })
    }
}

Answer 2

在调用的方法之外全局或在范围内添加一个变量，IsProcessing并在第一次调用该方法时将其设置为 true，然后您可以在该方法上检查if (IsProcessing) return false;

Answer 3

您需要做的就是设置一个变量来指示函数是否正在运行：

var isRunning = false;

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

Answer 4

您不想考虑所有点击次数，而是按顺序考虑吗？如果是这样，我建议您在添加点击以处理和消耗点击之间分开流：

的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; // 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);

http://jsfiddle.net/kD4JL/1/