如何正确使用 setInterval 和 clearInterval？答案

【问题标题】：How do I use setInterval and clearInterval peoperly?如何正确使用 setInterval 和 clearInterval？
【发布时间】：2021-07-08 04:20:17
【问题描述】：

我希望这个计时器从 20 开始倒计时并在 0 处停止。点击按钮会调用 timerFunction()。

var time=20;
var clicked=false;

function timeDisplay(){
    document.getElementById("timer").innerHTML=
    time;
}
function timerFunction(){
    if(!clicked){
        clicked=true;
        if(time>0){
            var i=setInterval(function(){
                time--;
                timeDisplay();
            },1000);
        }
        else{
            clearInterval(i);
        }
    }
}

现在，计时器可以工作，但它不会停在零处，我不明白为什么。显然我对此很陌生，所以任何建设性的批评都是值得赞赏的。

【问题讨论】：

标签： javascript setinterval clearinterval

【解决方案1】：

首先你的timerFunction 只运行一次。语句if(time>0) 将只执行一次，并且始终为真，因为time 最初为20。

理想情况下，您希望在定期间隔后检查您的 time 变量。您可以在 timeDisplay 函数中执行一些操作。要启用它，您需要确保 timeDisplay 可以访问唯一的间隔 id（此处为 intervalName）。

var time=20;
var clicked=false;
var intervalName = null;
function timeDisplay(){
    document.getElementById("timer").innerHTML=
    time;
      if(time == 0){
            clearInterval(intervalName);
        }
  
}
function timerFunction(){
    if(!clicked){
        clicked=true;
       intervalName = setInterval(function(){
                time--;
                timeDisplay();
            },1000);
        }
    
}

注意：我已将 i 替换为 intervalName。

【讨论】：

【解决方案2】：

您的代码存在逻辑缺陷。当您调用 timerFunction 时，您设置了间隔。但由于该函数只运行一次，它永远不会检查你的 if 子句，它也不会多次设置间隔，因为它会多次执行。

提示：尝试检查 setIntervall 回调中的时间。我不是 100% 确定，但您可能也可以使用 clearIntervall(this) 之类的东西清除内部的间隔。也许你想试试这个。 :)

【讨论】：

【解决方案3】：

实际上，您的 if 条件正在检查一次，并且当执行进入内部时，如果它没有再次检查 if 条件，因此您应该在区间函数中有一个条件来检查时间变量的值并清除区间。

` 变量时间=20； var clicked=false;

function timeDisplay(){
    document.getElementById("timer").innerHTML= time;
}
function timerFunction(){
    if(!clicked){
        clicked=true;
        var i= setInterval(function(){
                time--;
                if(time == 0){
                    clearInterval(i);
                }
                timeDisplay();
        },1000);
    }
}

【讨论】：