CODEWITHSUNDEEP
javascriptjquerysetinterval
TaylorMac
TaylorMac

Reputation: 9002

How to clear all instances of a setInterval?

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 commented out one of the things I have tried, seeing as though the interval is not created until later this is problematic.

Upvotes: 3

Views: 3818

Answers (4)

jfriend00
jfriend00

Reputation: 707606

Or use jQuery's ability to keep track of the timers for you as described here: http://plugins.jquery.com/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.

Upvotes: 0

Rob Cowie
Rob Cowie

Reputation: 22619

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);
});

Upvotes: 3

amit_g
amit_g

Reputation: 31260

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);
});

Upvotes: 1

Ian
Ian

Reputation: 2108

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));
});

Upvotes: 2

Related Questions