How to kill a javascript setTimeout loop

Question

I have this loop that works okay:

function countdown(counter) {
    x = counter;
    if (x > 0) {
        x--;
        alert(x + "/5");
        if (x > 0) {
            setTimeout(function () {
                countdown(x);
            }, 500);
        }
    }
};

countdown(6);

But I'd like to be able to kill it, and start it again by pressing a button. I'd like to restart the loop, regardless of what number it's on when I press the button.

I've got nowhere over the last few hours.

Here's a jsfiddle: http://jsfiddle.net/4vtPH/4/

Save the return value of setTimeout somewhere. Call clearTimeout, then re-call countdown(6);. — gen_Eric
– gen_Eric, Commented Jul 30, 2013 at 0:18
Not sure, but setInterval might be better in your case? developer.mozilla.org/en-US/docs/Web/API/window.setInterval it also has a clear method similar to timeout — house9
– house9, Commented Jul 30, 2013 at 0:22

Dan-Nolan · Accepted Answer · 2013-07-30 00:29:25Z

16

You can use clearTimeout (documentation)

var timeout;
function countdown(counter) {
    x = counter;
    if (x > 0) {
        x--;
        alert(x + "/5");
        if (x > 0) {
            timeout = setTimeout(function () {
                countdown(x);
            }, 2000);
        }
    }
};
$('input').click(function() {
    clearTimeout(timeout);
    countdown(6);
});
countdown(6);

Fiddle

edited Jul 30, 2013 at 0:29

answered Jul 30, 2013 at 0:18

Dan-Nolan

6,6574 gold badges29 silver badges32 bronze badges

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

1 Comment

Yuvaranjani Over a year ago

Hi, i have used same clearTimeout() function to clear the already running loop. but it still running already created instances. So, after using clearTimeout(), i try to create new instance. Instead of clearing the previous one, it is added as another concurrent loop. Can you please help me on destroy the previous instances?

DaoWen · Accepted Answer · 2013-07-30 00:18:57Z

0

You should really look at the documentation for setTimeout.

It returns a timeout id that you can use with clearTimeout to reset.

answered Jul 30, 2013 at 0:18

DaoWen

33.1k6 gold badges77 silver badges102 bronze badges

Comments

marteljn · Accepted Answer · 2013-07-30 00:19:17Z

0

First you need to assign your setTimeout to a variable.

var timeout = setTimeout(..

Then when needed you can use clearTimeout(timeout). Make sure your timeout variable is scoped in a way that it can be accessed anywhere you need to access it.

answered Jul 30, 2013 at 0:19

marteljn

6,5263 gold badges32 silver badges44 bronze badges

Comments

Marcel Gwerder · Accepted Answer · 2013-07-30 00:46:47Z

0

How about using an interval for a countdown? Here is an alternative solution (DEMO):

function Countdown(counter) {
    this.interval = 0;
    this.x = counter;
    console.log(this.x + "/"+counter);
    this.start = function() {
        var self = this;
        this.interval = setInterval(function () {
            self.x--;
            console.log(self.x + "/"+counter);
            if(self.x == 0) self.stop();
        }, 2000);
    };

    this.stop = function() {
        clearInterval(this.interval);  
    };
};

var c = new Countdown(7);
c.start();

var c2 = new Countdown(4);

c2.start();

edited Jul 30, 2013 at 0:46

answered Jul 30, 2013 at 0:40

Marcel Gwerder

8,5406 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to kill a javascript setTimeout loop

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related