在点击时重置setinterval [英] Reset setinterval on click

问题描述

我已经写了这个简单的轮播.目前，我正在使用setInterval以一定的时间间隔运行nextSlide函数.我想在用户单击导航链接一定时间后延迟计时器运行.

I've written this simple Carousel. At the moment I'm using setInterval to run my nextSlide function at certain intervals. I want to defer the timer from running when a user clicks on the navigation links for a certain length of time.

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

任何有关其余部分编写方式的反馈也将很好.

Any feedback on how the rest is written would be good too.

推荐答案

您可以执行以下操作: http ://jsbin.com/uzixi3/5/edit

You could do something like this: 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()更具可读性和更便宜.

I made some other tweaks as well though, for example you can use a switch statement to make .nextSlide() much more readable and cheaper.

尽管如此，总的来说，没有理由将这些函数作为jjquery本身的扩展方法，因为它们不与对象进行交互，它们可以是范围仅限于闭包的方法，如下所示:

Overall though, there's no reason to make these functions as extension methods on jjquery itself since they don't interact with objects, they can just be methods scoped to the closure like this: http://jsbin.com/uzixi3/6/edit

如果方法实际上是在$('#slideContainer')上运行的，例如$('#slideContainer').nextSlide()，并且在您的方法中使用了this.animate()和this.css()可能更有意义，只是一些想法可能会帮助您在使用过程中变得更加灵活.

If the methods were actually running on $('#slideContainer'), e.g. $('#slideContainer').nextSlide() and inside your methods you used this.animate() and this.css() it might make a bit more sense, just some thoughts that may help you get more flexible as you go.

这篇关于在点击时重置setinterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！