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

好吧，看起来你在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));

重新启动setInterval

3 个答案: