如何停止元素上的定时器函数？解决jQuery倒计时重复初始化混乱问题

你遇到的这个问题太典型了——每次调用initializeClock都会给同一个.clockdiv新建一个定时器，旧的定时器没被清理，多个定时器同时修改DOM内容，倒计时自然就乱跳了。而且因为timeinterval是函数内部的局部变量，外部拿不到引用，没法直接调用clearInterval来终止旧定时器。

简洁解决方案（调用端无需改动） #

咱们可以利用jQuery的data()方法，把每个clock元素对应的定时器ID存储在元素本身的自定义数据属性里，这样下次初始化前先清除旧的定时器，再创建新的。

修改后的initializeClock函数如下：

function initializeClock(clock, endtime) {
  // 先清除该元素上已存在的旧定时器
  clock.data('timer-interval') && clearInterval(clock.data('timer-interval'));

  var daysSpan = clock.find('.days');
  var hoursSpan = clock.find('.hours');
  var minutesSpan = clock.find('.minutes');
  var secondsSpan = clock.find('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);
    daysSpan.html(t.days);
    hoursSpan.html(('0' + t.hours).slice(-2));
    minutesSpan.html(('0' + t.minutes).slice(-2));
    secondsSpan.html(('0' + t.seconds).slice(-2));

    if (t.total <= 0) {
      clearInterval(timeinterval);
      clock.removeData('timer-interval'); // 倒计时结束后清理存储的ID
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
  clock.data('timer-interval', timeinterval); // 把新定时器ID存到元素上
}

方案说明 #

• 每次调用initializeClock时，第一行就会检查当前clock元素是否存储过定时器ID，如果有就立即清除旧的定时器，从根源避免多个定时器同时运行。
• 新创建的定时器ID会被存在元素的data-timer-interval属性里，下次调用时能直接获取并清理。
• 你原来的调用代码（包括页面初始化的批量调用、后续更新的单独调用）完全不需要改动，就能自动适配这个逻辑。

另外补充下：你之前试的.clearQueue()和.stop()是用来处理jQuery动画队列的，和setInterval创建的定时器不属于同一体系，所以对清除定时器完全无效，不用再浪费时间在这上面啦。

内容的提问来源于stack exchange，提问作者qualebs