Question

在动态计数器中，我希望能够停止并恢复它。我设法做到了，但“取消”按钮仅在第一次工作;一旦我重新启动计数器，我就无法再次阻止它。

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

这是我的代码：

<!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（计时器）替换你的const，

let interval = setInterval(() => {

并重新分配你的let（恢复）

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)
})

并改变间隔而不是const

控制clearInterval函数

3 个答案: