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

JavaScript's setTimeout function making unexpected, multiple calls

本文关键字：意外 调用 函数 setTimeout JavaScript      更新时间：2023-09-26

我试图用下面的代码来简化我遇到的问题。一些代码依赖于jQuery，供参考。

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

这个问题快把我毁了。

为了彻底起见，我包含了一个完整的示例。我知道这有点长。 <>之前$(文档)时函数(){mainLoop ();}）；Var counter = 0;var timeison = 0;var t;函数mainLoop() {handleInput ();计时器();｝函数timerHandle() {如果(! timerIsOn) {timerIsOn = 1;计时器();｝｝函数计时器(){if (timerIsOn) {t = setTimeout(mainLoop, 1000);计数器+ +;$("跨度")。text(柜台);//显示经过的时间｝｝//只是简单的按钮函数handleInput () {$(" #计时器").click (timerHandle);$(" #新").click(造);｝函数Thing() {this.talk ();｝Thing.prototype.talk = function() {alert("你好! ");｝函数createThing() {新事物;｝之前我真的很感谢你的帮助!

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

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次

问题是您注册了许多次事件处理程序。每次你调用

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

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

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

move:

handleInput();

: 

document ready function
相关文章：