countDown или таймер JavaScript

Question

Подскажите, пожалуйста, что не так с этим таймером? Он не останавливается, когда time = 0 Как мне это исправить?

let time = 10;
let timeScreen = document.getElementById('time-left-screen');

function countDown() {
  let minutes = Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60): Math.floor(time / 60);
  let seconds = time % 60 < 10 ? '0' + time % 60: time % 60;
  timeScreen.innerHTML = `${minutes}:${seconds}`;
  time --;
}

function startGame() {
  if(time >= 0) {
    setInterval(countDown, 1000);
  } else {
    clearInterval(countDown);
  }
}

Answer 1

Чтобы использовать setInterval и clearInterval, можно почитать здесь. Для вашего примера комментарии в коде:

let timeScreen = document.getElementById('time-left-screen');
let time = 10;
// Объявляем переменную глобально, чтобы 
// она была видна в любых функциях и циклах
let tCount;

function countDown() {
  let minutes = Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) : Math.floor(time / 60);
  let seconds = time % 60 < 10 ? '0' + time % 60 : time % 60;
  timeScreen.innerHTML = `${minutes}:${seconds}`;
  // Условие для остановки таймера
  if (time <= 0) {
    // Останавливаем таймер с ID, который находиться в tCount
    clearInterval(tCount);
    console.log(`Таймер с ID = ${tCount} остановлен и удалён.`);
  }
  time--;
}

function startGame() {
  // Запускаем таймер и заносим выданный ID в tCount
  tCount = setInterval(countDown, 1000);
  console.log(`Таймер с ID = ${tCount} создан и запущен.`);
}

startGame();

<p id="time-left-screen"></p>

БЛОГ НА HUSL

countDown или таймер JavaScript

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