如何停止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); 
    } 
} 

更少的代码行意味着更少的机会搞砸了。