Question

我尝试使用下面的代码简化我遇到的问题。一些代码依赖于jQuery，fyi。

基本上，我希望点击“New Thing”时会出现一条警告信息。但是，如果启动计时器，单击“新事物”将导致意外行为，其中出现的警报消息数等于经过的时间。

这个问题正在摧毁我。

为了彻底，我已经包含了一个完整的例子。我意识到它有点冗长。

$(document).ready(function() {
    mainLoop();
});

var counter = 0;
var timerIsOn = 0;
var t;

function mainLoop() {
    handleInput();
    timer();
}

function timerHandle() {
    if (!timerIsOn){
        timerIsOn = 1;
        timer();
    }
}

function timer(){
    if (timerIsOn) {
    t = setTimeout(mainLoop, 1000);
    counter++;
    $("span").text(counter); // To display the elapsed time 
    }
}

// Just simple buttons
function handleInput(){    
    $("#timer").click(timerHandle); 
    $("#new").click(createThing);
}

function Thing() {
    this.talk();
}

Thing.prototype.talk = function() {
    alert("Hello!");
}

function createThing() {
    new Thing;
}

我真的很感激帮助！

Answer 1

这是因为您向按钮的单击事件添加了多个事件处理程序

function timer(){
    if (timerIsOn) {
      t = setTimeout(mainLoop, 1000);
      counter++;
      $("span").text(counter); // To display the elapsed time 
    } }

如果超时触发，它将执行mainLoop。哪个会调用handleInput 和handleInput将另一个事件处理程序连接到click事件。

function handleInput(){    
     $("#timer").click(timerHandle); 
     $("#new").click(createThing); }

如果计时器正在运行并且已经触发3次，则进行维护。单击#new或#timer将调用适当的函数（timerHandle，createThing）3次。

Answer 2

问题是您多次注册事件处理程序。每次打电话

$("#timer").click(timerHandle);

您注册了一个新的事件处理程序。这意味着，当单击div时，timerHandle将运行您调用上述数字的次数。您可以使用unbind来避免这种情况：

$("#timer").unbind('click');
$("#timer").click(timerHandle);

Answer 3

举：

handleInput();

为：

document ready function

JavaScript setTimeout函数进行意外的多次调用

3 个答案: