重新启动 setInterval

Question

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

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

旋转功能只是旋转图像。但是，我还允许用户手动选择他们正在查看的图像。因此，我需要取消 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

好吧，看起来您是在 .ready() 处理程序的匿名函数中本地声明 interverID 。我实际上想知道为什么您在点击事件处理程序中没有遇到引用错误，因为在那里无法知道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));