在 Javascript/jQuery 中重新启动 setInterval()（没有 clearInterval）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4328148/
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
Restarting a setInterval() in Javascript/jQuery (without clearInterval)
提问by art15t
I'm working on ui tabs built using jQuery. Everything works except for one issue - I did a setInterval that runs a function that does a trigger("click") so that it goes to the next tab after 5000 miliseconds. It runs through each tab fine, the issue is that if the user manually clicks on a tab, the timer for the setInterval does not restart back at 0. For example if a user were to start on tab1 at 0 miliseconds and clicks on tab2 at 2000 miliseconds, the setInterval doesn't go back to 0, it would start at 2000 and run to 5000 miliseconds and would subsequently goto tab3. I understand why it's happening, I just wonder if there were a way to restart the setInterval timing without having to do a clearInterval() and creating an entirely new setInterval(). Any insight would be appreciated.
我正在研究使用 jQuery 构建的 ui 选项卡。除了一个问题之外，一切正常 - 我做了一个 setInterval 运行一个执行触发器（“单击”）的函数，以便它在 5000 毫秒后转到下一个选项卡。它可以很好地运行每个选项卡，问题是如果用户手动单击选项卡，则 setInterval 的计时器不会从 0 重新启动。例如，如果用户要在 0 毫秒时在 tab1 上启动并在 0 毫秒时单击 tab2 2000 毫秒，setInterval 不会回到 0，它会从 2000 开始并运行到 5000 毫秒，然后会转到 tab3。我明白为什么会发生这种情况，我只是想知道是否有一种方法可以重新启动 setInterval 计时，而无需执行 clearInterval() 并创建一个全新的 setInterval()。任何见解将不胜感激。
Update
更新
Thanks for the replies - The reason I was trying to avoid using clearInterval was because I was having issues of how to write the code in a way where the clearInterval would stop the setInterval completely. The code is setup to track whenever a user has clicked a tab. The problem is the auto change function utilizes trigger('click'), so it runs the clearInterval function I wrote also when the tabs auto-change. It seems to run fairly fine on its own, but once the user starts clicking on tabs, the setInterval behaves unusually and switches tabs unpredictably. I suspect what is happening is that several setIntervals are running at once... Here's the code (If you haven't guessed it already, I'm pretty new at javascript/jquery). I've commented out parts so that it's functional, but it still doesn't function as I intended (from first post).
感谢您的回复 - 我试图避免使用 clearInterval 的原因是因为我遇到了如何以 clearInterval 完全停止 setInterval 的方式编写代码的问题。该代码设置为在用户单击选项卡时进行跟踪。问题是自动更改功能使用触发器（“单击”），因此它会在选项卡自动更改时运行我编写的 clearInterval 函数。它本身似乎运行得相当好，但是一旦用户开始单击选项卡， setInterval 的行为就会异常并且无法预测地切换选项卡。我怀疑正在发生的事情是几个 setIntervals 正在同时运行......这是代码（如果你还没有猜到，我是 javascript/jquery 的新手）。我已经注释掉了部分，以便它可以正常工作，但它仍然没有'
// auto change tabs
if( options.interval ) {
function timerCom() {
if( !$(".controller").hasClass('paused') ) {
var i = $(".tab-current > a").attr("rel");
//alert(i);
if( i == 3 ) {i = 0};
$container
.find('a')
.eq(i)
.trigger('click');
}
}
//$("#promo-items > li > a").click(function () {
//var timer;
//if( timer != null ) {clearInterval(timer);}
timer = setInterval(timerCom, options.interval);
//});
}
回答by Click Upvote
No, there is no way to restart a timer set by setIntervalwithout clearing the timer.
不，没有办法在setInterval不清除计时器的情况下重新启动计时器。
回答by Alex Wayne
You can't really alter intervals or timeouts, only clear them. That said it should be a simple thing to create a function that clears the interval, and then starts a new but identical one immediately with a fresh time value.
你不能真正改变间隔或超时，只能清除它们。也就是说，创建一个清除间隔的函数应该是一件简单的事情，然后立即使用新的时间值启动一个新的但相同的函数。
var intervalID;
var resetTimer = function() {
if (intervalID) { clearInterval(intervalID) };
intervalID = setInterval(function() {
console.log('doing stuff!');
}, 5000);
};
回答by LDX
timer = setInterval(function() {
timerCom();
}, options.interval);
回答by Ryan Willis
I know this post is well over 2 years old, but I ran into a similar problem just now, and I found a solution.
我知道这篇文章已经超过 2 年了，但我刚才遇到了类似的问题，我找到了解决方案。
I was writing an image scroller that would automatically shift to the next image after a set amount of time, and whenever I clicked the navigation buttons, the transitions moved double-time.
我正在编写一个图像滚动条，它会在设定的时间后自动切换到下一个图像，每当我单击导航按钮时，转换都会移动两倍。
Here's my solution:
这是我的解决方案：
Make the interval variable (timerin your case) somewhat global.
使区间变量（timer在您的情况下）有点全局。
i.e. in the optionssection (assuming it was defined earlier, and then later assigned), add a null timervariable.
即在options部分（假设它之前定义，然后分配），添加一个空timer变量。
var options = {
'interval',
//Other variables
'timer',
};
Then, call clearIntervaltwice when you handle the click event.
然后，clearInterval在处理点击事件时调用两次。
$("#promo-items > li > a").click(function () {
if( options.timer != null ) {
clearInterval(options.timer);
clearInterval(options.timer);
}
options.timer = setInterval(timerCom, options.interval);
});
Worked like a charm for me.
对我来说就像一种魅力。
Again, sorry if this is wayyyy too late.
再次，对不起，如果这太晚了。
