如何停止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关键字，您可以定义一个不再引用全局变量运行器的新局部变量

所以代码应该看起来像

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

我经常将Interval句柄存储在函数本身上（假设我知道只有一个实例）：

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

这样可以避免全局“运行”变量可能被意外覆盖。 （当然，mainfun.runner也可以在全球范围内访问，但不太可能被意外写入。）

Answer 3

所有其他答案都指出了实际问题，用局部变量覆盖了全局变量，但我想我可以简化一下代码：

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

更少的代码行意味着更少的出错机会。

Answer 4

您正在重新定义runner在你的if语句。 删除var ： http : //jsfiddle.net/g6to2gqn/2/

Answer 5

您正在重新声明间隔跑步者的变量； 只需删除该行上的var runner = setInterval(function() { varRunner var runner = setInterval(function() {

在这里http://jsfiddle.net/g6to2gqn/4/