Javascript暂停/恢复切换按钮

我正在学校里做一个小挑战。我们已经学习了CSS、HTML和Javascript。我正在尝试创建一个始终在后台运行的计时器。然后我需要一个按钮，暂停所说的计时器，并变成一个恢复按钮，将恢复计时器。这就是我想到的

 document.addEventListener("DOMContentLoaded", () => {

const counterElement = document.getElementById('counter')

let counterValue = 0

const pauseButton = document.getElementById('pause')

const resumeButton = document.getElementById('resume')

const submitButton = document.getElementById(`submit`)

const minusButton = document.getElementById(`minus`)

const plusButton = document.getElementById('plus')

const heartButton = document.getElementById('heart')


intervalId = setInterval(myCallback, 1000);

function myCallback() {
    counterValue += 1;
    counterElement.innerHTML = counterValue;
}

function resume() {
    setInterval(myCallback, 1000);
    pauseButton.style.display = '';
    resumeButton.style.display = 'none';

}

function pause() {
    clearInterval(intervalId);
    pauseButton.style.display = 'none';
    resumeButton.style.display = '';

}

pauseButton.addEventListener("click", (e) => {
    pause()
})

resumeButton.addEventListener("click", (e) => {
    resume()
})

它不能正常工作。只有最初的几次点击才有效

function resume() {
    intervalId = setInterval(myCallback, 1000);
    pauseButton.style.display = '';
    resumeButton.style.display = 'none';
}

试试这个。根本问题是您没有将setInterval引用分配回intervalId变量。因此，当您稍后调用clearInterval（intervalId）时，您的代码会说，“那已经被清除了…”，而不做任何事情

---

简而言之，您当前的resume（）函数创建一个新的setInterval，它不会更新旧的setInterval。由于没有对新setInterval的引用，pause函数无法找到并清除它。

在resume（）函数中创建新间隔时，需要在intervalId变量中再次存储其返回值，以便下次调用pause（）时使用.

当您在

resume

函数中调用

setTimeout

时，您必须重新分配

intervalId

变量以存储新的间隔ID。如果不这样做，您的

pause

函数将继续取消第一个间隔，这是不可操作的

因此，请改为：

document.addEventListener（“DOMContentLoaded”，（）=>{
常量counterElement=document.getElementById（'counter'）
设计数器值=0
const pauseButton=document.getElementById（'pause'）
const resumeButton=document.getElementById（'resume'）
//const submitButton=document.getElementById（`submit`）
//const minusButton=document.getElementById（`减号`）
//const plusButton=document.getElementById（'plus'）
//const heartButton=document.getElementById（'heart'）
//声明变量是个好主意。因为您想重新分配变量，所以可能需要'let'。
设intervalId=setInterval（myCallback，1000）；
函数myCallback（）{
计数器值+=1；
counterElement.innerHTML=计数器值；
}
功能恢复（）{
//将新的间隔ID分配给“intervalId”`
intervalId=setInterval（myCallback，1000）；
pauseButton.style.display=''；
resumeButton.style.display='none'；
}
函数暂停（）{
clearInterval（intervalId）；
pauseButton.style.display='none'；
resumeButton.style.display=''；
}
pauseButton.addEventListener（“单击”，（e）=>{
暂停（）
})
resumeButton.addEventListener（“单击”，（e）=>{
简历（）
})
})

暂停
简历
0

这很有道理，谢谢！没问题，如果它解决了你的问题，那么请考虑把这个标记为这个问题的答案，以便其他类似问题的人更容易找到它。