Как сделать таймер обратного отсчёта на странице через setInterval?

Задан 25 месяцев назад1.1к просмотров2 ответа

Хочу вывести таймер: от 10 до 0, раз в секунду, прямо в <p id="timer">. Знаю про setInterval, но он у меня уходит в минус и не останавливается. Как правильно?

Константин Пономарёв 🐣 Птенец

спросил 25 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

setInterval(функция, 1000) вызывает функцию каждую секунду и будет делать это бесконечно, пока ты её не остановишь через clearInterval. Нужно запомнить id таймера и остановить на нуле:

let count = 10;
const out = document.getElementById('timer');
out.textContent = count;

const id = setInterval(function() {
  count--;
  out.textContent = count;
  if (count === 0) {
    clearInterval(id);   // останавливаем
    out.textContent = 'Время вышло!';
  }
}, 1000);

Ключ в clearInterval(id) — без него отсчёт продолжится в минус.

Глеб Баранов 🥚 Яйцо

25 месяцев назад

Разница, которую полезно знать:

setInterval(fn, 1000) — повторяет каждую секунду;
setTimeout(fn, 1000) — выполняет один раз через секунду.

Для «сделать что-то один раз с задержкой» нужен setTimeout, для повторяющегося — setInterval.

Татьяна Петрова 🐣 Птенец

24 месяца назад

Ваш ответ

Войдите, чтобы ответить на вопрос.