Javascript 控制清除间隔函数_Javascript_Setinterval_Clearinterval

Javascript 控制清除间隔函数

javascript

Javascript 控制清除间隔函数,javascript,setinterval,clearinterval,Javascript,Setinterval,Clearinterval,在动态计数器中，我希望能够停止并恢复它。我设法做到了，但“取消”按钮只在第一次起作用；一旦我重新启动了计数器，我就不能再停止它了我还想知道如何改进“恢复”按钮代码，这样我就不必重复行这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>setInterval</title> </head> <b

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

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

这是我的代码：

<!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>


设定间隔
汉帕萨多·塞贡多斯
取消
简历
const timer=document.getElementById（'timer'）；
设计数器=0；
常量间隔=设置间隔（（）=>{
计数器++；
如果（计数器==1）{
timer.textContent=`ha pasado${counter}segundo`；
}否则{
timer.textContent=`han pasado${counter}segundos`；
}
}, 1000)
const cancelButton=document.getElementById（'cancel-button'）；
cancelButton.addEventListener（'单击'，（）=>{
清除间隔（间隔）
})
const resume-button=document.getElementById（'resume-button'）；
resumeButton.addEventListener（'单击'，（）=>{
设置间隔（（）=>{
计数器++；
如果（计数器==1）{
timer.textContent=`ha pasado${counter}segundo`；
}否则{
timer.textContent=`han pasado${counter}segundos`；
}
}, 1000)
})

非常感谢

解决此问题的一种方法是将间隔变量重新分配到第二次调用

setInterval

，也不要使用

const

，因为它是只读的

const timer=document.getElementById（'timer'）；
设计数器=0；
let interval=setInterval（（）=>{
计数器++；
如果（计数器==1）{
timer.textContent=`ha pasado${counter}segundo`；
}否则{
timer.textContent=`han pasado${counter}segundos`；
}
}, 1000)
const cancelButton=document.getElementById（'cancel-button'）；
cancelButton.addEventListener（'单击'，（）=>{
对于（var i=0；i{
间隔=设置间隔（（）=>{
计数器++；
如果（计数器==1）{
timer.textContent=`ha pasado${counter}segundo`；
}否则{
timer.textContent=`han pasado${counter}segundos`；
}
}, 1000)
})


设定间隔
汉帕萨多·塞贡多斯
取消
简历
解决此问题的一种方法是将间隔变量重新分配到第二次调用setInterval
，也不要使用const
，因为它是只读的

const timer=document.getElementById（'timer'）；
设计数器=0；
let interval=setInterval（（）=>{
计数器++；
如果（计数器==1）{
timer.textContent=`ha pasado${counter}segundo`；
}否则{
timer.textContent=`han pasado${counter}segundos`；
}
}, 1000)
const cancelButton=document.getElementById（'cancel-button'）；
cancelButton.addEventListener（'单击'，（）=>{
对于（var i=0；i{
间隔=设置间隔（（）=>{
计数器++；
如果（计数器==1）{
timer.textContent=`ha pasado${counter}segundo`；
}否则{
timer.textContent=`han pasado${counter}segundos`；
}
}, 1000)
})

设定间隔
汉帕萨多·塞贡多斯
取消
简历

用let（计时器）替换常量
并重新分配您的let（简历）

用let（计时器）替换常量
并重新分配您的let（简历）
当您恢复计数器时，您需要将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)
})

当您恢复计数器时，您需要将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
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)
})