countDown или таймер JavaScript

105

16 апреля 2022, 13:00

Подскажите, пожалуйста, что не так с этим таймером? Он не останавливается, когда 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();