Как остановить setInterval loop

Question

Я установил setInterval, чтобы изменить цвет div, используя разные классы css. Я начинаю менять цвета, нажимая кнопку, но я также хочу, чтобы она меняла цвета, используя ту же кнопку. Я не могу заставить это работать. Вот мои ЯШ:

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

Вы переопределяете runner в инструкции if. Удалить var: http://jsfiddle.net/g6to2gqn/2/

Answer 3

Вы обновляете переменную отрезка интервала; Просто удалите вар на Thie линии var runner = setInterval(function() {

Здесь http://jsfiddle.net/g6to2gqn/4/

Answer 4

Я часто хранят Interval ручки на самой функции (предполагается, что я знаю, что будет только один экземпляр):

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

Это предотвращает имеющий глобальный «runner» var, который может быть перезаписан случайно. (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); 
    } 
} 

число строк кода означает меньше шансов испортить.