Question

我正在努力应对学校的一个小挑战。我们已经学习了 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()
})

它不能正常工作。只有前几次点击有效。

Answer 1

export default const TitleCycle = ({ item }) => {

    //Now item === the individual top-level object for each component

}

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

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

Answer 2

当您在 setTimeout 函数中调用 resume 时，您必须重新分配 intervalId 变量以存储新的间隔 ID。如果您不这样做，您的 pause 函数将继续取消第一个间隔，这是一个空操作。

所以改为这样做：

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


  //It's a good idea to declare your variables. Since you want to reassign it, you probably want `let`.
  let intervalId = setInterval(myCallback, 1000);

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

  function resume() {
    //Assign the new interval ID to `intervalId`
    intervalId = 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()
  })

})

<button id="pause" >Pause</button>
<button id="resume" style="display:none;" >Resume</button>
<div id="counter" >0</div>

Answer 3

当您在 resume() 函数中创建新的 Interval 时，您需要将其返回值再次存储在您的 intervalId 变量中，以便下次调用 pause() 时使用。

Javascript 暂停/恢复切换按钮

3 个答案: