Using multiple instances of setInterval

Question

I have a jsFiddle here: http://jsfiddle.net/dztGA/22/

The goal: Essentially, I'm trying to have 2 discrete timers on the same page that can be destroyed and re-created on mouseover/mouseout (pause), or on manual progression (restart).

The problem: What my jsFiddle's single timer will illustrate is that when I click "Stop Timer", my setInterval (stored in variable t) seems to have multiple instances albeit being destroyed with clearInterval(t). This becomes apparent when I click "Restart Timer" and it seems to have 2+ independent timers as illustrated by the quick increment.

A caveat: I have done as much research on SO as I can, but because I'll be having 2 different sliders on the page, I can't use any "clear all timers" methods, so I tried storing each in a variable.

I hope that's clear. Thanks for the view.

Can't dupe; Chrome 14 under Ubuntu--works fine. Although referring to window.t and t depending on where you are gives me the heebie-jeebies. — Dave Newton
– Dave Newton, Commented Oct 11, 2011 at 20:27
Thanks @DaveNewton , I thought calling window.method(t) inferred clearing object "window"'s parameter "t"! Much appreciated for the insight. — Morgan Delaney
– Morgan Delaney, Commented Oct 11, 2011 at 20:35
If I click "restart timer" repeatedly, without clicking anything else, the timer will run out of control. — Blazemonger
– Blazemonger, Commented Oct 11, 2011 at 20:37

Rob W · Accepted Answer · 2011-10-11 20:51:49Z

8

To fix your current issue: Add clearInterval(window.t) at the onclick function of the reset button.

A method to be able to have multiple timers. This requires a certain structure, though.
Fiddle (6 timers!): http://jsfiddle.net/dztGA/27/

(function(){ //Anonymous function, to not leak variables to the global scope
    var defaultSpeed = 3000; //Used when missing
    var timerSpeed = [500, 1000, 2000, 4000, 8000];

    var intervals = [];
    function increase(i){
        return function(){
            var elem = $("#count"+i);
            elem.text(parseFloat(elem.text()) + 1);
        }
    }
    function clear(i){
        return function(){
            clearInterval(intervals[i]);
        }
    }
    function restart(i){ //Start AND restart
        return function(){
            clear(i)();
            increase(i)();
            intervals[i] = setInterval(increase(i), timerSpeed[i]||defaultSpeed);
        }
    }
    // Manual increment
    $('input[name=increment]').each(function(i){
        $(this).click(function(){
            restart(i)();
            increase(i)();
        });
    });

    // Clear timer on "Clear"
    $('input[name=clear]').each(function(i) {
        $(this).click(clear(i));
    });

    // Restart timer on "Restart"
    $('input[name=reset]').each(function(i) {
        $(this).click(restart(i));

        //Optionally, activate each timer:
        increase(i)();
    });
})();

edited Oct 11, 2011 at 20:51

answered Oct 11, 2011 at 20:27

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Morgan Delaney Over a year ago

My understanding was that I was calling the .clearInterval method, on the window object, and therefore clearInterval(window.t) was implied. Anyway, it works so far, so thanks very much!

Rob W Over a year ago

Updated answer. You've stated that you originally wanted to support multiple timers ;)

Morgan Delaney Over a year ago

I'm literally programming that right now - thank you so much for going out of your way to help guide my next step!

Morgan Delaney Over a year ago

I really like your semantic names, keeping it within the anonymous function's scope, and the terse arrays. Thanks for the added lesson in JS. :)

Joe · Accepted Answer · 2011-10-11 20:27:33Z

1

// Clear timer on "Clear"
$('input[name=clear]').click(function() {
    window.clearInterval(t);
});

should be

// Clear timer on "Clear"
$('input[name=clear]').click(function() {
    window.clearInterval(window.t);
});

because this is the input not Window

answered Oct 11, 2011 at 20:27

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Collectives™ on Stack Overflow

Using multiple instances of setInterval

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related