clearInterval 似乎不起作用

Question

我正在尝试制作一个简单的 javascript 计数器。

基本上，我通过输入从用户那里得到一个 integer 值，我想从该值递减计数到 0。

所以我编码了这个：

 let inputCounter = document.querySelector("#input-counter"); let startBox = document.querySelector(".start-box"); let startCounter = document.querySelector("#start-counter"); let errorMessage = document.querySelector("#error-message"); let timerCircle = document.querySelector(".c100"); let timeSpan = document.querySelector(".c100 > span"); startCounter.addEventListener('click', function() { let seconds = inputCounter.value; if (isNaN(seconds)) { errorMessage.textContent = "Not an integer value"; errorMessage.classList.add("active"); } else { errorMessage.classList.remove("active"); timerCircle.style.display = "block"; startBox.style.display = "none"; timeSpan.textContent = seconds; let timerId = setInterval(() => { seconds -= 1; if (seconds < 0) { clearInterval(timerId); } timeSpan.textContent = seconds; }, 1000); } });

 <div class="container"> <div class="start-box"> <input type="text" id="input-counter" placeholder="type your value in seconds"> <button id="start-counter">Start</button> <div id="error-message"></div> </div> <div class="c100 p50"> <span></span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div> </div>

因此，这可以正常工作，并且可以从自定义输入的数字开始正确倒计时，但这里唯一的问题是它会变为-1 、 -2 、 -3等。

所以这就是为什么我尝试将timerId确定为setInterval function 然后检查这个条件：

if(seconds < 0){
    clearInterval(timerId);
}

但是它并没有清除间隔并且仍然显示负数......

那么这里出了什么问题？ 当涉及到0时，如何正确清除间隔？

Answer 1

试试这个代码：

    let seconds = 10
    let timerId = setInterval(() => {
      
      if (seconds <= 0) {
        clearInterval(timerId);
      }

      console.log(seconds);
    seconds -= 1;
    }, 1000);

Answer 2

您的clearInterval实现有效，但在 clear 之后缺少return语句。 所以它正确地清除了间隔（它不会再次运行 setTimeout 回调），但回调的当前执行仍在继续，所以它通过 if 语句并在 label 中设置 -1 无论如何。 return 语句在您达到基本情况时停止执行该回调，并将 label 设置为 0。

您还可以重新安排代码以在 if 语句上方设置 label 并将条件更改为if (seconds === 0) ，因此在清除并返回之后，您的 seconds 变量保持为 0，而不是 -1 .

 let inputCounter = document.querySelector("#input-counter"); let startBox = document.querySelector(".start-box"); let startCounter = document.querySelector("#start-counter"); let errorMessage = document.querySelector("#error-message"); let timerCircle = document.querySelector(".c100"); let timeSpan = document.querySelector(".c100 > span"); startCounter.addEventListener('click', function() { let seconds = inputCounter.value; if (isNaN(seconds)) { errorMessage.textContent = "Not an integer value"; errorMessage.classList.add("active"); } else { errorMessage.classList.remove("active"); timerCircle.style.display = "block"; startBox.style.display = "none"; timeSpan.textContent = seconds; let timerId = setInterval(() => { seconds -= 1; if (seconds < 0) { clearInterval(timerId); return; // THIS IS WHAT WAS MISSING } timeSpan.textContent = seconds; }, 1000); } });

 <div class="container"> <div class="start-box"> <input type="text" id="input-counter" placeholder="type your value in seconds"> <button id="start-counter">Start</button> <div id="error-message"></div> </div> <div class="c100 p50"> <span></span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div> </div>

Answer 3

如果您在< 0时停止，它将检查：

• 2，减少，它现在是1，它<0？ 不，所以又是 go
• 1，减少，它现在为0，它<0？ 不，所以又是 go
• 1，减少，它现在是-1，它<0？ 是的，停止：结果 -1

您可以在< 1或<= 0中停止。
console.log(秒) // 0

此外，使用超时和数字变量不是那么准确（取决于处理中的不稳定性）。

我建议保存开始时间，并每秒计算一次差异。

如果电脑死机 3 秒，当它再次启动时，已经过了 3 秒，而不仅仅是 1。

---

 let inputCounter = document.querySelector("#input-counter"); let startBox = document.querySelector(".start-box"); let startCounter = document.querySelector("#start-counter"); let errorMessage = document.querySelector("#error-message"); let timerCircle = document.querySelector(".c100"); let timeSpan = document.querySelector(".c100 > span"); startCounter.addEventListener('click', function() { let seconds = inputCounter.value; if (isNaN(seconds)) { errorMessage.textContent = "Not an integer value"; errorMessage.classList.add("active"); } else { errorMessage.classList.remove("active"); timerCircle.style.display = "block"; startBox.style.display = "none"; timeSpan.textContent = seconds; let timerId = setInterval(() => { console.log({seconds}) seconds -= 1; if (seconds < 1) { clearInterval(timerId); } timeSpan.textContent = seconds; }, 1000); } });

 <div class="container"> <div class="start-box"> <input type="text" id="input-counter" placeholder="type your value in seconds"> <button id="start-counter">Start</button> <div id="error-message"></div> </div> <div class="c100 p50"> <span></span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div> </div>