javascript - 重新启动 setInterval

Question

所以我有一个计时器每 5 秒旋转一组图像。因此，我在文档启动时运行它。

$(document).ready(function() {
var intervalID=setInterval(function(){ 
     rotate();    
}, 5000);
});

Rotate 函数只是简单地旋转图像。但是，我也允许用户手动选择他们正在查看的图像。因此，我需要取消 SetInterval，然后在 5 秒后重新开始

我想要做的是取消间隔，然后通过这样做重新开始

$('a').click(function(){
 clearInterval(intervalID);   
 intervalID=setInterval(function(){ 
     rotate();    
}, 5000);    
});

但是，代码似乎并没有像我希望的那样重置间隔。

Answer 1

如果intervalID变量在.ready()范围内声明，则以下内容应该有效（未经测试）：

$(document).ready(function() {
    var rotate = function() { ... },
        intervalID = setInterval(rotate, 5000);

    $('a').click(function() {
       clearInterval(intervalID);   
       intervalID = setInterval(rotate, 5000);    
    });
});

Answer 2

只需intervalID通过在所有函数之外声明它来使其成为全局变量。

使用您当前的代码，其范围仅限于$(document).ready()方法，因此可能会导致您描述的问题。

Answer 3

好吧，看起来您是在处理程序interverID的匿名函数中本地声明.ready()。我实际上想知道为什么您在单击事件处理程序中没有遇到参考错误intervalID，因为那里不知道。

您需要确保此变量可用并且两个函数都具有共享上下文。最简单的方法是围绕脚本创建一个匿名的自调用方法，并将该变量声明为超出范围。

(function _myPrivateContext($, window, document, undefined) {
    var intervalID = null;

    $(document).ready(function() {
       intervalID = setInterval(rotate, 5000);
    });

    $('a').click(function(){
        clearInterval(intervalID);   
        intervalID = setInterval(rotate, 5000);    
    });

}(jQuery, window, document));