如何停止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您需要使用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

您正在if語句中重新定義runner。刪除var：http://jsfiddle.net/g6to2gqn/2/

Answer 3

您將重新聲明區間轉輪的變量; 剛卸下thie線變種var runner = setInterval(function() {

這裏http://jsfiddle.net/g6to2gqn/4/

Answer 4

我經常儲存間隔的函數本身處理（假設我知道只會有一個實例）：

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

這可以防止有全球的「跑步者」變種可能會被意外覆蓋。 （當然，mainfun.runner也是全局訪問的，但是不太可能被意外寫入）。

Answer 5

所有其他答案指出了實際問題，用本地變量覆蓋全局變量，但我認爲我會簡化你的代碼：

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

更少的代碼行意味着更少的機會搞砸了。