时间戳

首页 > 解决方案 > Javascript 暂停/恢复切换按钮

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

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

标签： javascripthtml

解决方案

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

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

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

推荐阅读