在递归函数中停止settimeout

时间:2009-06-15 10:35:30

标签: javascript jquery settimeout

我的问题是我无法停止计时器。

我有this method来设置此论坛的超时时间。 它应该将标识符存储在全局变量中。 我意外地发现,在我隐藏“mydiv”之后它仍在运行。

我现在还需要知道,如果递归函数创建多个实例,或者仅为超时创建一个实例。因为首先我认为它每次都会覆盖“var mytimer”。 现在我不太确定。

什么是停止计时器的可靠方法?

var updatetimer= function () {
//do stuff
        setTimeout(function (){updatetimer();}, 10000);

}//end function


//this should start and stop the timer
$("#mybutton").click(function(e) { 
         e.preventDefault();
         if($('#mydiv').is(':visible')){
                   $('#mydiv').fadeOut('normal');
             clearTimeout(updatetimer);

        }else{
                   $('#mydiv').fadeIn('normal');
                   updatetimer();
               }
});
谢谢,理查德

7 个答案:

答案 0 :(得分:20)

我认为大多数人都在理解为什么这不起作用,但我想我会为你提供更新的代码。它与您的几乎完全相同,只是它将超时分配给变量以便可以清除它。

此外,setTimeout中的匿名函数很棒,如果要运行逻辑内联,更改函数内部的'this'值,或将参数传递给函数。如果您只想调用一个函数,只需将该函数的名称作为第一个参数传递即可。

var timer = null; 

var updatetimer = function () {
    //do stuff

    // By the way, can just pass in the function name instead of an anonymous
    // function unless if you want to pass parameters or change the value of 'this'
    timer = setTimeout(updatetimer, 10000);
};

//this should start and stop the timer
$("#mybutton").click(function(e) { 
     e.preventDefault();
     if($('#mydiv').is(':visible')){
        $('#mydiv').fadeOut('normal');
        clearTimeout(timer);  // Since the timeout is assigned to a variable, we can successfully clear it now

    } else{
        $('#mydiv').fadeIn('normal');
        updatetimer();
   }
});

答案 1 :(得分:7)

我认为你误解了'setTimeout'和'clearTimeout'。

如果您想设置稍后要取消的计时器,请执行以下操作:

foo = setTimeout(function, time);

然后致电

clearTimeout(foo);

如果你想取消那个计时器。

希望这有帮助!

答案 2 :(得分:2)

由于编写的mytimer是一个永远不具有超时标识符值的函数,因此您的clearTimeout语句将无法实现。

我根本没有看到任何递归,但你需要存储值 setTimeout 返回给你,如果你需要将它与多个潜在事件配对,你需要将它存储在一个你可以查找的键值 - 或许类似于元素id?

答案 3 :(得分:1)

你不能停止所有创建的函数,将函数转换为setInterval(表示与递归函数相同的逻辑)并将其停止:

// recursive
var timer= function () {
// do stuff
  setTimeout(function (){timer();}, 10000);
}

使用setInterval的相同逻辑:

 // same logic executing stuff in 10 seconds loop
 var timer = setInterval(function(){// do stuff}, 10000)

停止它:

 clearInterval(timer);

答案 4 :(得分:1)

这是用于控制和调节递归setTimeout函数的简单伪代码。

    const myVar = setTimeout(function myIdentifier() {

    // some code

    if (condition) {
        clearTimeout(myIdentifier)
    } else {
        setTimeout(myIdentifier, delay); //delay is a value in ms.
    }

}, delay);

答案 5 :(得分:0)

如上所述,此代码无效的主要原因是您将错误的内容传递给clearTimeout调用 - 您需要存储setTimeout调用的返回值你在updateFunction中创建并将 this 传递给clearTimeout,而不是函数引用本身。

作为改进的第二个建议 - 只要你有一个你称之为递归超时函数的东西,你最好使用setInterval方法,该方法定期运行一个函数直到被取消。这将实现您尝试使用updateFunction方法所做的相同的事情,但它更干净,因为您只需要在延迟函数中包含“do stuff”逻辑,并且它可能在您赢得时更高性能'是创建嵌套闭包。加上它是正确的做法,它必须要有所作为,对吗? : - )

答案 6 :(得分:0)

(函数(){

$('#my_div').css('background-color', 'red');
$('#my_div').hover(function(){
var id=setTimeout(function() {
    $('#my_div').css('background-color', 'green');
}, 2000);

var id=setTimeout(function() {
    $('#my_div').css('background-color', 'blue');
}, 4000);
var id=setTimeout(function() {
    $('#my_div').css('background-color', 'pink');
}, 6000);

    })

$("#my_div").click(function(){  
        clearTimeout(id);

        })

})();

相关问题