控制clearInterval函数

Question

在动态计数器中，我希望能够停止和恢复它。我设法做到了，但是 "cancel" 按钮只在第一次起作用；一旦我重新启动计数器，我就无法再停止它。

我还想知道如何改进 "resume" 按钮代码，这样我就不必重复行了。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>setInterval</title>
</head>
<body>
  <h1 id="timer">Han pasado 0 segundos</h1>
  <button id="cancel-button">Cancel</button>
  <button id="resume-button">Resume</button>

  <script>

    const timer = document.getElementById('timer');
    let counter = 0;
    const interval = setInterval(() => {
      counter++;
      if (counter == 1){
        timer.textContent = `ha pasado ${counter} segundo`;
      }else{
        timer.textContent = `han pasado ${counter} segundos`;
      }
    }, 1000)


    const cancelButton = document.getElementById('cancel-button');
    cancelButton.addEventListener('click', () => {
      clearInterval(interval)
    })

    const resumeButton = document.getElementById('resume-button');
    resumeButton.addEventListener('click', () => {
      setInterval(() => {
      counter++;
      if (counter == 1){
        timer.textContent = `ha pasado ${counter} segundo`;
      }else{
        timer.textContent = `han pasado ${counter} segundos`;
      }
    }, 1000)

    })

  </script>
</body>
</html>

非常感谢！

Answer 1

解决它的一种方法是将间隔变量重新分配给 setInterval 的第二次调用，也不要使用 const 因为它只读

const timer = document.getElementById('timer');
    let counter = 0;
    let interval  = setInterval(() => {
      counter++;
      if (counter == 1){
        timer.textContent = `ha pasado ${counter} segundo`;
      }else{
        timer.textContent = `han pasado ${counter} segundos`;
      }
    }, 1000)


    const cancelButton = document.getElementById('cancel-button');
    cancelButton.addEventListener('click', () => {
      for(var i = 0; i<=100;i++){
      clearInterval(i)
      }
      
    })

    const resumeButton = document.getElementById('resume-button');
    resumeButton.addEventListener('click', () => {
    interval = setInterval(() => {
      counter++;
      if (counter == 1){
        timer.textContent = `ha pasado ${counter} segundo`;
      }else{
        timer.textContent = `han pasado ${counter} segundos`;
      }
    }, 1000)

    })

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>setInterval</title>
</head>
<body>
  <h1 id="timer">Han pasado 0 segundos</h1>
  <button id="cancel-button">Cancel</button>
  <button id="resume-button">Resume</button>
  </body>
</html>

Answer 2

live working example

用 let (timer),

替换你的常量

let interval = setInterval(() => {

并重新分配你的 let (resume)

interval = setInterval(() => {

Answer 3

当您恢复计数器时，您需要将 setInterval 的结果分配给您的 "inteval" 变量，因为您正在使用它来清除您的间隔。

const resumeButton = document.getElementById('resume-button');
resumeButton.addEventListener('click', () => {
  interval = setInterval(() => {
  counter++;
  if (counter == 1){
     timer.textContent = `ha pasado ${counter} segundo`;
  }else{
     timer.textContent = `han pasado ${counter} segundos`;
  }
}, 1000)
})

并将间隔更改为 let 而不是 const

控制clearInterval函数

Control clearInterval function

javascript

setinterval

clearinterval