Question

我一直遇到setInterval的问题：

$('li.item').live('click', function(){ 
    //Need to work with Dyn created object
    //clearInterval(itemClockInterval);
    itemClockInterval = setInterval(function() {
        deconInterval(_this.children('.timeleft'), time);
    }, 1000);
});

“class”类有多个li。单击时，setInterval函数会更新附加到该特定li的时钟。

我的问题是，每次点击一个li时，时钟倒计时的速度是以前的两倍，因为正在运行一个额外的间隔。我需要在新的间隔开始之前清除所有间隔实例，但我的解决方案都不起作用。

我评论了我尝试过的其中一件事，看到好像间隔未创建，直到后来这是有问题的。

Answer 1

使用.data（）将setInterval（）的结果存储在元素上，然后单击清除它。

$('li.item').live('click', function(){
    $this = $(this);
    var existing_timer = $this.data('clock');
    if (existing_timer){
        clearInterval(existing_timer);
    }
    itemClockInterval = setInterval(function() {
        deconInterval($this.children('.timeleft'), time);
    }, 1000);
    $this.data('clock', itemClockInterval);
});

Answer 2

使用闭包：

$('li.item').live('click', (function(){ //Need to work with Dyn created object
  var itemClockInterval;

  return function(){
    if(itemClockInterval) clearInterval(itemClockInterval);
    itemClockInterval = setInterval(function() {
            deconInterval(_this.children('.timeleft'), time);
      }, 1000);
  };
})());

OR，使用jQuery的数据方法：

$('li.item').live('click', function(ev){ //Need to work with Dyn created object
  var itemClockInterval = $(ev.target).data("itemClockInterval")
  if(itemClockInterval) clearInterval(itemClockInterval);
  $(ev.target).data("itemClockInterval", setInterval(function() {
          deconInterval(_this.children('.timeleft'), time);
    }, 1000));
});

Answer 3

使用data存储与该li ...相关联的intervalID

$('li.item').live('click', function(){ //Need to work with Dyn created object
    var itemClockIntervalID = $(this).data("itemClockIntervalID");

    if (itemClockIntervalID != "undefined") {
        clearInterval(itemClockIntervalID);
    }

    itemClockIntervalID = setInterval(function() { deconInterval(_this.children('.timeleft'), time); }, 1000);

    $(this).data("itemClockIntervalID", itemClockIntervalID);
});

Answer 4

或者使用jQuery跟踪定时器的能力，如下所述：http://plugins.jquery.com/project/timers。它会自动维护jQuery对象和计时器之间的关联，以便跟踪前一个计时器，以便在设置新计时器之前清除时间间隔。

如何清除setInterval的所有实例？

4 个答案: