I've always had issues with setInterval:

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

There are multiple li's with the class "item". When clicked, the setInterval function updates a clock appended to that specific li.

My problem is that every time an li is clicked, the clock counts down twice as fast as before because an additional interval is running. I need all instances of the interval to be cleared before the new interval starts, but none of my solutions work.

I mented out one of the things I have tried, seeing as though the interval is not created until later this is problematic.

I've always had issues with setInterval:

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

There are multiple li's with the class "item". When clicked, the setInterval function updates a clock appended to that specific li.

My problem is that every time an li is clicked, the clock counts down twice as fast as before because an additional interval is running. I need all instances of the interval to be cleared before the new interval starts, but none of my solutions work.

I mented out one of the things I have tried, seeing as though the interval is not created until later this is problematic.

• javascript
• jquery
• setinterval

• Your problem might be elsewhere. What is _this that you define there? I'm not sure you're structuring this whole thing properly, which is why you're running into problems - not because setInterval is evil, it is very not evil. – davin Commented Jul 12, 2011 at 0:29
• Hi, sorry. I omitted some of my code and I forgot to change the _this var to $(this), I used _this for another part of the code – TaylorMac Commented Jul 14, 2011 at 3:26

4 Answers 4

Store the result of setInterval() on the element using .data() and clear it on click.

$('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);
});

use a closure:

$('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, use jQuery's data method:

$('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));
});

Use data to store the intervalID associated with that li...

$('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);
});

Or use jQuery's ability to keep track of the timers for you as described here: http://plugins.jquery./project/timers. It automatically maintains an association between a jQuery object and your timer so it keeps track of the previous timer so you can clear the interval before setting a new one.