Question

我有一个函数接受一个字符串并一次输出一个字符并延迟。用户单击链接或按钮时会发生该事件。问题是，如果用户在第一个链接完成之前单击一个链接然后再单击另一个链接，它们将同时运行并输出到屏幕。它变得乱七八糟。例如： string1：“我非常喜欢馅饼” string1：“下一个人也是这样” 输出：我是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/

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

4 个答案: