Таймеры в JavaScript похожи на циклы, но ключевое отличие заключается в том, что таймеры выполняют код через определённый период. Цикл выполняется непрерывно до завершения. Таймер вызывает функцию или код через заданный интервал времени, обычно указываемый в секундах.
setInterval
Рассмотрим пример использования setInterval. Создадим переменную counter и функцию, которая будет вызываться с заданным интервалом:
let counter = 0;
let myInt = setInterval(function() {
console.log("Секунд прошло: " + counter);
counter++;
if (counter === 3) {
clearInterval(myInt);
}
}, 1000);
В коде выше:
- setInterval принимает два аргумента: функцию, которая будет вызываться, и интервал времени в миллисекундах (1000 мс = 1 секунда).
- Внутри функции мы увеличиваем counter и выводим его значение в консоль.
- Когда counter достигает 3, clearInterval(myInt) останавливает таймер.
setTimeout
Рассмотрим функцию setTimeout. Используем обработчик события onload для тела документа:
<body onload="timer()">
Создадим функцию timer():
function timer() {
let counter = -1; // Начальное значение -1 для корректного отображения при загрузке страницы
let id = setInterval(function() {
counter++;
document.getElementById('count').innerHTML = counter;
}, 1000);
}
В этом примере:
- setTimeout неявно используется внутри setInterval функции timer(), которая запускается при загрузке страницы. (Исправлено: в исходном коде был setInterval, а не setTimeout.)
- counter инициализируется значением -1, чтобы при загрузке страницы значение обновилось на 0, а не на 1.
- Функция внутри setInterval обновляет содержимое элемента с ID ‘count’ каждые 1000 миллисекунд (1 секунда).
Сравнение setInterval и setTimeout
setInterval запускает функцию с заданным интервалом и повторяет это бесконечно, пока не будет вызван clearInterval. setTimeout запускает функцию один раз через заданное время.
Важно отметить, что setTimeout не гарантирует точность задержки – время выполнения предыдущего кода может повлиять на время запуска функции. Аналогично, setInterval может накапливать задержки, если функция внутри него выполняется дольше, чем заданный интервал.
В этом уроке мы изучили два основных типа таймеров в JavaScript: setInterval для повторяющегося выполнения кода и setTimeout для однократного выполнения через заданное время. Правильное использование этих функций позволяет создавать интерактивные и динамические веб-страницы.