在递归函数中停止 settimeout

Question

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

我让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();
               }
});

谢谢，理查德

Answer 1

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

另外，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();
   }
});

Answer 2

我认为您误解了“setTimeout”和“clearTimeout”。

如果您想设置一个稍后想取消的计时器，请执行以下操作：

foo = setTimeout(function, time);

然后调用

clearTimeout(foo);

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

希望这会有所帮助！

Answer 3

正如所写的 mytimer 是一个永远不会有超时标识符值的函数，因此您的 clearTimeout 语句将一事无成。

我在这里根本看不到任何递归，但是您需要存储 setTimeout 返回的值，如果您需要将其与多个潜在事件配对，则需要将其存储在您可以查找的键值 - 可能类似于元素 ID？

Answer 4

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

    const myVar = setTimeout(function myIdentifier() {

    // some code

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

}, delay);

Answer 5

您不能停止所有创建的函数，而是将函数转换为 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);

Answer 6

如上所述，此代码不起作用的主要原因是您将错误的内容传递给 clearTimeout 调用 - 您需要将 setTimeout 调用的返回值存储在 @ 987654324@ 并将 this 传递给 clearTimeout，而不是函数引用本身。

作为第二个改进建议 - 每当您拥有所谓的递归超时函数时，最好使用 setInterval 方法，该方法会定期运行一个函数，直到取消。这将实现您尝试使用 updateFunction 方法执行的相同操作，但它更简洁，因为您只需要在延迟函数中包含“do stuff”逻辑，并且它可能更高效，因为您不会创建嵌套闭包。另外，这是正确的方法，它必须考虑到一些事情，对吗？ :-)

Answer 7

(函数(){

$('#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);

        })

})();