单击时重置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变量的返回值以便稍后引用它 - 这样您可以在需要时取消它,或者重新启动它.

有关更多详细信息,请参阅此MDC文章.

基础是:

intervalID = setInterval(flashText, 1000);

//do something...

clearInterval(intervalID);