javascript - 如何停止 setInterval 循环

Question

我设置了一个 setInterval 来使用不同的 css 类更改 div 的颜色。我通过按下一个按钮开始它改变颜色，但我也想停止它使用同一个按钮改变颜色。我无法让它工作。这是我的 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);

这是 JSFiddle

Answer 1

当你定义 mainfun 时，你需要删除 'runner' 之前的 var 关键字

通过使用 var 关键字，您定义了一个不再引用全局变量 runner 的新局部变量

所以代码应该是这样的

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