Javascript, toggle a setInterval

Question

I'm trying to make a small script where the screen will randomly change it's background color every 100ms, and you can toggle this on and off by pressing a single button. I can get it to start, but I can't get it to stop.

Here is the main code for toggling:

var on = -1;

function change() {
    on = on*-1;
    if (on == true) {
        var light = window.setInterval(disco,100);
    }
    else {
        window.clearInterval(light);
    }
}

disco is the function that changes the background color.

I've tried many different variations of this, but I think this is the closest I've gotten. Clicking the button now only set's another interval, despite the on variable correctly switching between 1 and -1. Am I not using clearInterval properly?

The full JSFiddle is here: http://jsfiddle.net/VZdk9/

I'm trying to practice JavaScript, so no jQuery please :)

You'll need to place `var light;` outside of the function, else it will be "undefined" when its called a second time for the close action . — Carl, Feb 07 '14 at 22:18

score 11 · Accepted Answer · edited May 23 '17 at 12:01

11

You have a scope issue with your variable light since it is defined inside the change() function. In order to keep track of the interval ID, you need to make it a global variable.

var light;

function change() {
    if (!light) {
        light = window.setInterval(disco,100);
    } else {
        window.clearInterval(light);
        light = null;
    }
}

I also removed your variable on since its possible values -1 and 1 are both truthy. You really only need to use one variable since light will be reset to null if the interval has been cleared. If this variable is controlled by another function feel free to change it back.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 07 '14 at 22:15

nullability

10,545
3
45
63

1 == true in javascript – Vladimir Gordienko Feb 07 '14 at 22:19
Try evaluating this expression: !!(-1) – nullability Feb 07 '14 at 22:20
try -1 == true ))) !!(-1) is type conversion – Vladimir Gordienko Feb 07 '14 at 22:21
In any case it's a bizarre way to handle a boolean value. – nullability Feb 07 '14 at 22:22
ok, i know but in question sample "on == true", and i just notise 1 == true, but -1 != true - so its ok – Vladimir Gordienko Feb 07 '14 at 22:24
I was always under the impression that 0 and below could always be considered false, while 1 and above was always true. I guess that's not the case! – damon Feb 07 '14 at 22:26

score 6 · Answer 2 · answered Feb 07 '14 at 22:15

6

var light = null;
function change () {
    if (light === null) {
        light = window.setInterval(disco, 100);
    } else {
        window.clearInterval(light);
        light = null;
    }
}

answered Feb 07 '14 at 22:15

Ford

2,559
1
22
27

Javascript, toggle a setInterval

2 Answers2