Блог

Я работаю над небольшой проблемой со школой. Мы изучили 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, ваша функция паузы не могла найти его и очистить.

При вызове setTimeout resume функции необходимо переназначить intervalId переменную для хранения нового идентификатора интервала. Если вы этого не сделаете, ваша 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> 

Когда вы создаете новый интервал в функции resume (), вам нужно снова сохранить его возвращаемое значение в переменной intervalId для следующего вызова функции pause().