Не останавливается setInterval

Question

если нажать два раза на кнопку старт, а затем на reset или stop timer не останавливается

const timer = document.querySelector('.timer-place');
let i = 0;

const buttonStart = document.querySelector('.startButton');
const buttonStop = document.querySelector('.stopButton');
const buttonReset = document.querySelector('.resetButton');

let timerInterval;
let isActive;

buttonStart.addEventListener('click', () => {
  isActive = true;
  if (isActive) {
    timerInterval = setInterval(function() {
      timer.innerHTML = `${i}`;
      i++;
    }, 500);
  }
});

buttonStop.addEventListener('click', () => {
  isActive = false;
  clearInterval(timerInterval);
});

buttonReset.addEventListener('click', () => {
  isActive = false;
  clearInterval(timerInterval);
  timer.innerHTML = `${i = 0}`;
});

<button class="startButton">Start</button>
<button class="stopButton">Stop</button>
<button class="resetButton">Reset</button>
<div class="timer-place"></div>

Answer 1

При нажатии на кнопку старт второй раз, у вас запускается второй интервал, в то время, как первый продолжает работать и при этом id интервала перезаписывается.

Что бы интервал можно было запустить только один раз, перенесите установку isActive = true; внутрь if и меняем проверку, заходить в if будем, если isActive === false

buttonStart.addEventListener('click', () => {
  if (!isActive) { // Если не запущен
      isActive = true; // Взводим флаг
      timerInterval = setInterval(function() {
          timer.innerHTML = `${i}`;
          i++;
      }, 500);
  } 
});

Полный код для демонстрации:

const timer = document.querySelector('.timer-place');
let i = 0;

const buttonStart = document.querySelector('.startButton');
const buttonStop = document.querySelector('.stopButton');
const buttonReset = document.querySelector('.resetButton');

let timerInterval;
let isActive;

buttonStart.addEventListener('click', () => {
  if (!isActive) { // Если не запущен
    isActive = true; // Взводим флаг
    timerInterval = setInterval(function() {
      timer.innerHTML = `${i}`;
      i++;
    }, 500);
  }
});

function stop() {
  isActive = false;
  clearInterval(timerInterval);
}

buttonStop.addEventListener('click', stop);

buttonReset.addEventListener('click', () => {
  stop();
  timer.innerHTML = `${i = 0}`;
});

<button class="startButton">Start</button>
<button class="stopButton">Stop</button>
<button class="resetButton">Reset</button>
<div class="timer-place"></div>

Answer 2

Отдельная переменная isActive не нужна, timerInterval работает не хуже:

const timer = document.querySelector('.timer-place');
let i = 0;

const buttonStart = document.querySelector('.startButton');
const buttonStop = document.querySelector('.stopButton');
const buttonReset = document.querySelector('.resetButton');

let timerInterval = undefined;

buttonStart.addEventListener('click', () => {
  if (timerInterval === undefined) {
    timerInterval = setInterval(function() {
      timer.innerHTML = `${i}`;
      i++;
    }, 500);
  }
});

buttonStop.addEventListener('click', () => {
  clearInterval(timerInterval);
  timerInterval = undefined;
});

buttonReset.addEventListener('click', () => {
  clearInterval(timerInterval);
  timerInterval = undefined;
  timer.innerHTML = `${i = 0}`;
});

<button class="startButton">Start</button>
<button class="stopButton">Stop</button>
<button class="resetButton">Reset</button>
<div class="timer-place"></div>

БЛОГ НА HUSL

Не останавливается setInterval

Ответы (2 шт):