单击时多次调用同一函数

calling the same function multiple times while clicking

本文关键字：函数 调用 单击      更新时间：2023-09-26

我有一个函数，它接受一个字符串，并一次输出一个字符，并带有延迟。当用户单击链接或按钮时发生该事件。问题是，如果用户在第一个链接完成之前单击一个链接，然后单击另一个链接，则它们会同时运行并输出到屏幕。它变得混乱起来。前任：String1 ： "我非常喜欢馅饼"String1 ： "The Next Guy 也是如此"输出 ： I sloi kdeo epse ....等等。

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

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

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

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

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

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

你不希望所有的点击都被考虑在内，而是按顺序考虑吗？如果是这样，我建议您在添加点击处理和消费点击之间分开流 :

该网页 ：

<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/

相关文章：