JS：无法通过clearInterval停止setInterval

Question

您好：我再次遇到问题。

我创建了使按钮像eh不倒翁一样工作的函数。 但是我找不到从另一个按钮状态停止setInterval和clearInterval的方法。

function goIdle(checker)
{
if(checker===1){
buttonDeeper.disabled=true;
var intIdle=(setInterval(goDeeperTest, 2000));//(600000-(bootTier*600)));
buttonIdle.value='Остановиться';
buttonIdle.addEventListener('click', function() {goIdle(2)}, false);
}
if (checker===2) {
clearInterval(intIdle);
buttonDeeper.disabled = false;
buttonIdle.value='Разбежаться';
buttonIdle.addEventListener('click', function() {goIdle(1)}, false);

}

Answer 1

intIdle变量是goIdle函数一次执行的局部变量。 在外部范围中声明它，以便在函数执行之间保留它：

var intIdle;
function goIdle(checker)
{
if(checker===1){
buttonDeeper.disabled=true;
intIdle=(setInterval(goDeeperTest, 2000));//(600000-(bootTier*600)));
buttonIdle.value='Остановиться';
buttonIdle.addEventListener('click', function() {goIdle(2)}, false);
}
if (checker===2) {
clearInterval(intIdle);
buttonDeeper.disabled = false;
buttonIdle.value='Разбежаться';
buttonIdle.addEventListener('click', function() {goIdle(1)}, false);

}

但是您遇到的另一个问题是，您似乎从未删除过事件侦听器。 因此，每次点击时，您都会再调用一次。 不行 您真正想要的是

buttonIdle.addEventListener('click', goIdle, false);
var intIdle;
function goIdle() {
    if (intIdle) {
        clearInterval(intIdle);
        buttonIdle.value='Разбежаться';
        buttonDeeper.disabled = false;
        intIdle = 0;
    } else {
        intIdle=setInterval(goDeeperTest, 2000);
        buttonDeeper.disabled = true;
        buttonIdle.value='Остановиться';
    }
}

Answer 2

代替

buttonIdle.addEventListener('click', function() {goIdle(2)}, false);

采用

buttonIdle.onclick = function() {goIdle(2)}, false);

否则，您的按钮将继续有2个监听器。