Повторение через setInterval

setTimeout() запускает функцию один раз. setInterval() запускает её снова и снова, каждый раз через заданное число миллисекунд, пока вы не остановите этот интервал. Он тоже возвращает идентификатор, а clearInterval() останавливает интервал. Вот обратный отсчёт для ракеты:

const countdown = document.querySelector("#countdown");

let seconds = 3;
countdown.textContent = seconds;

const timer = setInterval(function () {
    seconds--;
    if (seconds === 0) {
        clearInterval(timer);
        countdown.textContent = "Взлёт!";
    } else {
        countdown.textContent = seconds;
    }
}, 1000);

Страница показывает 3, через секунду 2, затем 1, а потом Взлёт! В этот момент clearInterval(timer) останавливает интервал, и его функция больше не запускается.

Обратите внимание:

• Функция впервые срабатывает через первую секунду, а не сразу. Поэтому скрипт сам показывает тройку, прежде чем запустить интервал.
• Переменная seconds находится снаружи функции, чтобы помнить число от одного запуска функции до другого, как счётчик щелчков. Если бы let seconds = 3; стояло внутри функции, каждый запуск начинался бы с 3, и страница вечно показывала бы 2.
• Интервал может остановить сам себя: его функция вправе использовать timer, потому что запускается только позже, когда в timer уже лежит идентификатор.

Типичные ошибки:

• Забыть clearInterval(): отсчёт продолжится до 0, -1, -2… пока страница открыта.
• clearInterval(seconds): нужен идентификатор интервала, а не число, которое вы отсчитываете.
• Запустить интервал дважды, например двумя щелчками по кнопке «Старт»: тогда одновременно работают два интервала, и отсчёт идёт вдвое быстрее. Как и с ракетой в прошлом упражнении, сначала остановите предыдущий интервал через clearInterval(timer).