如何停止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/