jQuery 单击时重置 setinterval
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3501652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reset setinterval on click
提问by Reynish
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.
我已经写了这个简单的 Carousel。目前我正在使用 setInterval 以特定时间间隔运行我的 nextSlide 函数。当用户点击导航链接一段时间时，我想推迟计时器的运行。
Check it out here http://jsbin.com/uzixi3/3/edit
在这里查看 http://jsbin.com/uzxixi3/3/edit
Any feedback on how the rest is written would be good too.
关于其余部分如何编写的任何反馈也会很好。
回答by Nick Craver
You could do something like this: http://jsbin.com/uzixi3/5/edit
你可以这样做：http: //jsbin.com/uzixi3/5/edit
The interval part is here:
间隔部分在这里：
var int = setInterval($.fn.nextSlide, 3000);
$("#slideNavigation a").click(function() {
clearInterval(int);
setTimeout(function() {
setInterval($.fn.nextSlide, 3000);
}, 10000);
});
I made some other tweaks as well though, for example you can use a switchstatement to make .nextSlide()much more readable and cheaper.
不过，我也做了一些其他调整，例如，您可以使用switch语句来.nextSlide()提高可读性和成本。
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
总的来说，没有理由将这些函数作为 jjquery 本身的扩展方法，因为它们不与对象交互，它们可以只是像这样作用域到闭包的方法：http: //jsbin.com/uzixi3/6/edit
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.
如果这些方法实际上运行于$('#slideContainer')，例如$('#slideContainer').nextSlide()，在您使用的方法中this.animate()并且this.css()它可能更有意义，那么一些想法可以帮助您在进行时变得更加灵活。
回答by Skilldrick
You can save the return value of setIntervalin a variable to refer to it later - that way you can cancel it if you need to, or restart it.
您可以将 的返回值保存setInterval在一个变量中以供以后引用 - 这样您就可以在需要时取消它，或重新启动它。
See this MDC articlefor more details.
有关更多详细信息，请参阅此 MDC 文章。
The basics are:
基础知识是：
intervalID = setInterval(flashText, 1000);
//do something...
clearInterval(intervalID);
回答by Carl Schulz
The above code really helped. Thanks Nick. I made a few minor adjustments so that once you clicked the function: the timer would stop, the function would execute, and then the timer initiates and resumes regular intervals.
上面的代码真的很有帮助。谢谢尼克。我做了一些小的调整，以便一旦您单击该功能：计时器将停止，该功能将执行，然后计时器启动并恢复定期间隔。
make sure you re-assign the var intto the new intervalyou create within the click function.
请确保您重新分配var int到新的interval你内创建click function。
var int = setInterval(change_slide, 5000);
$("#div").click(function() {
console.log('clicked');
clearInterval(int);
setTimeout(function() {
int = setInterval(change_slide, 5000);
});
});
回答by Alberto Cerqueira
See:
看：
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();
});
