在Javascript/jQuery中重新启动setInterval()（不使用clearInterval）

Question

我正在使用jQuery构建UI选项卡。除了一个问题以外，一切都正常 - 我设置了一个setInterval，它会运行一个函数，该函数会执行trigger("click")，以便在5000毫秒后进入下一个选项卡。它可以顺利地运行每个选项卡，但问题是，如果用户手动单击选项卡，setInterval的计时器不会重新从0开始。例如，如果用户在0毫秒开始于选项卡1，并在2000毫秒时单击选项卡2，则setInterval不会回到0，它将从2000开始，运行到5000毫秒，然后随即进入选项卡3。我理解为什么会发生这种情况，只是想知道是否有一种方法可以重新启动setInterval定时，而无需执行clearInterval（）并创建一个全新的setInterval（）。任何见解都将不胜感激。

更新

感谢大家的回复-我试图避免使用clearInterval的原因是，我无法找到一种方法来编写代码，以便clearInterval停止setInterval。该代码设置为跟踪用户何时单击选项卡。问题是自动更改函数使用trigger('click')，因此当选项卡自动更改时，它也会运行我编写的clearInterval函数。它似乎可以独立运行得相当好，但一旦用户开始单击选项卡，setInterval的行为就变得不寻常，并且无法预测地切换选项卡。我怀疑正在同时运行几个setInterval......以下是代码（如果你还没有猜到，我对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);

                //});

            }

- art15t

---

欢迎来到SO！如果您需要提供额外的信息，请编辑您的问题。对于答案的具体问题，请使用评论。SO不是一个论坛，答案字段严格保留给问题的答案。 - Tim Post

Answer 1

不，使用setInterval设置的定时器无法重新启动，必须清除该定时器。

- Ali

Answer 2

您实际上无法更改间隔或超时，只能清除它们。尽管如此，创建一个清除间隔的函数并立即使用新的时间值启动相同但相同的间隔应该是一件简单的事情。

var intervalID;
var resetTimer = function() {
  if (intervalID) { clearInterval(intervalID) };
  intervalID = setInterval(function() {
    console.log('doing stuff!');
  }, 5000);
};

- Alex Wayne

---

这种使用大括号的方式几乎让代码难以阅读 :P。 大括号应该单独占用一行。 - Ali

我不关心这个争论，但事实上，Google的编码标准说：“由于隐式分号插入，始终将花括号与它们打开的内容放在同一行上。”http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml - DaveWalley

Answer 3

timer = setInterval(function() {
  timerCom();
}, options.interval);

- LDX

Answer 4

我知道这篇文章已经超过2年了，但我刚遇到一个类似的问题，并找到了解决方案。

我正在编写一个图像滚动器，它会在设定的时间后自动切换到下一张图片，每当我点击导航按钮时，转换速度就会加倍。

这是我的解决方案：

将间隔变量（在您的情况下为timer）设置为全局变量。

即在options部分（假设先前已定义，然后稍后分配），添加一个空的timer变量。

var options = {
'interval',
//Other variables
'timer',
};

然后，在处理点击事件时调用clearInterval两次。

$("#promo-items > li > a").click(function () {

if( options.timer != null ) {
clearInterval(options.timer);
clearInterval(options.timer);
}

options.timer = setInterval(timerCom, options.interval);

});

对我来说非常顺利。

再次抱歉，如果这太晚了。

- Ryan Willis