如何在javascript倒计时上实现开始和停止按钮答案

【问题标题】：how to implement start and stop buttons on javascript countdown如何在javascript倒计时上实现开始和停止按钮
【发布时间】：2021-06-07 13:27:55
【问题描述】：

以下代码应该启动和停止计时器，但是“停止”按钮不起作用。 “播放”工作正常。它只是不会停止

var countDown;

function countDownClock() {
  var timeLeft = 5;
  var text = document.getElementById("countDownTimer");
  var countDown = setInterval(function() {
    if (timeLeft == 0) {
      clearInterval(countDown);
      text.innerHTML = "finished!";
    } else {
      text.innerHTML = timeLeft;
    }
    timeLeft -= 1;
  }, 1000);

}

<button onclick="reloadMaths()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>

我需要展示更多的 JS 吗？

最初我认为这篇文章解决了它，因为我没有将变量作为全局变量 - 但是，将其设为全局变量后，此解决方案不起作用 javascript countdown timer with start & stop buttons

【问题讨论】：

请分享更多细节。您尝试过什么来解决问题？你被困在哪里了？

标签： javascript

【解决方案1】：

改变这一行 var countDown = setInterval(function() { 到 countDown = setInterval(function() {

在第 1 行中，您已经声明了一个全局变量 countDown。然后在函数中你又做了一次，这就是你的 clearInterval 函数不会清除间隔的原因。

【讨论】：

谢谢，我完全错过了。快把我逼疯了！

【解决方案2】：

主要问题是您在函数"countDownClock" 的local scope 中重新定义了变量"countDown"。全局变量（在代码的第一行中定义）将保持未定义，因此使用 clearInterval(countDown); 清除间隔等同于 clearInterval(undefined)，这显然不是您想要做的。

删除变量的本地（重新）声明将解决您的问题。

来自

var countDown = setInterval(function() { ... })

收件人

countDown = setInterval(function() { ... })

试用修改后的代码：

var countDown;

function countDownClock() {
  var timeLeft = 5;
  var text = document.getElementById("countDownTimer");
  countDown = setInterval(function() { // removed var keyword
    if (timeLeft == 0) {
      clearInterval(countDown);
      text.innerHTML = "finished!";
    } else {
      text.innerHTML = timeLeft;
    }
    timeLeft -= 1;
  }, 1000);

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<button onclick="countDownClock()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>
<div id="countDownTimer"></div>

【讨论】：

【解决方案3】：

这应该可行：

var countDown;

function countDownClock() {
  var timeLeft = 5;
  var text = document.getElementById("countDownTimer");
  countDown = setInterval(function() {
    if (timeLeft == 0) {
      clearInterval(countDown);
      text.innerHTML = "finished!";
    } else {
      text.innerHTML = timeLeft;
    }
    timeLeft -= 1;
  }, 1000);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="countDownTimer"></div>

<button onclick="countDownClock()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>

您的代码的主要问题是您在 countDownClock 函数中重新定义了 countDown。因此，当您执行 clearInterval(countDown) 时，您并没有清除间隔。你只是在清除一个未定义的全局变量。

【讨论】：