如何停止setInterval循环

Question

I've setup a setInterval to change the colour of a div using different css classes. I start it changing colours by pressing a button, but I also want to stop it changing colours using the same button. I can't get that to work. Here is my js:

    var bsstyles = ["alert alert-success","alert alert-info","alert alert-warning","alert alert-danger"];

    var i = 0;

    var buttonstate = false;

    var runner;

    var mainfun = function () {
        if (buttonstate == 0) {
            buttonstate = true;
            document.getElementById("changebutton").className = "btn btn-primary btn-lg active";
            var runner = setInterval(function() {
                document.getElementById("alertw").className = bsstyles[i];
                i++;
                if (i==bsstyles.length) {
                        i=0;
                }
            },1000);
        } else {
            clearInterval(runner);
            document.getElementById("changebutton").className = "btn btn-primary btn-lg";
            buttonstate = false;
        }
    }

    var changeButton = document.getElementById("changebutton");

    changeButton.addEventListener('click',mainfun,false);

Here is the JSFiddle

Answer 1

when you define mainfun you need to remove the var keyword before 'runner'

by using the var keyword there you are defining a new local variable that no longer references your global variable runner

so the code should look like

var bsstyles = ["alert alert-success","alert alert-info","alert alert-warning","alert alert-danger"];

var i = 0;

var buttonstate = false;

var runner;

var mainfun = function () {
    if (buttonstate == 0) {
        buttonstate = true;
        document.getElementById("changebutton").className = "btn btn-primary btn-lg active";
        runner = setInterval(function() {
            document.getElementById("alertw").className = bsstyles[i];
            i++;
            if (i==bsstyles.length) {
                    i=0;
            }
        },1000);
    } else {
        clearInterval(runner);
        document.getElementById("changebutton").className = "btn btn-primary btn-lg";
        buttonstate = false;
    }
}

var changeButton = document.getElementById("changebutton");

changeButton.addEventListener('click',mainfun,false);

Answer 2

I often store Interval handles on the function itself (assuming I know there will only be one instance) :

mainfun.runner = setInterval(function () {
    //Content
}, 1000);
clearInterval( mainfun.runner );

This prevents having a global 'runner' var around that might get overwritten by accident. (mainfun.runner is globally accessible as well, of course, but less likely to be written to accidentally.)

Answer 3

All the other answers have pointed out the actual problem, overriding a global variable with a local one, but I thought I would simplify your code a bit:

var runner = null, i = 0;

var changeClassById = function(id, className) {
    document.getElementById(id).className = className;
};

var mainfun = function () {
    if (runner) {
        clearInterval(runner);
        changeClassById("changebutton", "btn btn-primary btn-lg");
        runner = null;
    } else {
        changeClassById("changebutton", "btn btn-primary btn-lg active");
        runner = setInterval(function() {
            changeClassById("alertw", bsstyles[++i % bsstyles.length]);
        }, 1000);
    }
}

Fewer lines of code means fewer chances to screw up.

Answer 4

You are redefining runner in your if statement. Remove var : http://jsfiddle.net/g6to2gqn/2/

Answer 5

You are redeclaring the variable of the interval runner; Just remove var on thie line var runner = setInterval(function() {

Here http://jsfiddle.net/g6to2gqn/4/