点击重置setinterval

Question

我写了这个简单的传送带。目前我正在使用setInterval以特定的时间间隔运行我的nextSlide函数。我想推迟计时器在用户点击导航链接一段时间后运行。

看看这里 http://jsbin.com/uzixi3/3/edit

上休息是怎么写的将是一件好事任何反馈。

Answer 1

你可以做这样的事情：http://jsbin.com/uzixi3/5/edit

的间隔部分是在这里：

var int = setInterval($.fn.nextSlide, 3000); 
$("#slideNavigation a").click(function() { 
    clearInterval(int); 
    setTimeout(function() { 
    setInterval($.fn.nextSlide, 3000); 
    }, 10000); 
}); 

我做了一些其他的调整，以及虽然对例如，您可以使用switch声明使.nextSlide()更具可读性和更便宜。

总体来说，没有理由让这些功能作为jjquery本身的扩展方法，因为它们不与物体互动时，他们可以只是方法作用域的关闭是这样的：http://jsbin.com/uzixi3/6/edit

如果方法是实际上在$('#slideContainer')上运行，例如$('#slideContainer').nextSlide()并在您的方法中使用了this.animate()和this.css()它可能会更有意义，只是有些想法可以帮助您在进行时更灵活。

Answer 2

您可以将返回值setInterval保存在一个变量中以便稍后引用它 - 这样，您可以在需要时取消它，或者重新启动它。

详情请参阅。

基本要点有：

intervalID = setInterval(flashText, 1000); 

//do something... 

clearInterval(intervalID); 

Answer 3

上面的代码确实有帮助。谢谢Nick。我做了一些小的调整，以便一旦你点击了该函数：定时器将停止，函数将执行，然后定时器启动并恢复定期的时间间隔。

请确保您将var int重新分配到您在click function内创建的新interval。

var int = setInterval(change_slide, 5000); 
$("#div").click(function() { 
    console.log('clicked'); 
    clearInterval(int); 
    setTimeout(function() { 
    int = setInterval(change_slide, 5000); 
    }); 
}); 

Answer 4

参见：

var IntID = setTimer(); 

function setTimer(){ 
    i = setInterval(startSlider, 4000); 
    return i; 
} 

function stopSlider() { 
    clearInterval(IntID); 
} 

//Restart Timer 

// Option 1 make a restartSlider function and call it 
$("#button").click(restartSlider); 
function restartSlider(){ 
    IntID = setTimer(); 
} 

//Option 2 create an anonymous function only for that click event. 
$("#button").click(function(){ 
    IntID = setTimer(); 
});