JavaScript Таймеры: setInterval и setTimeout

Таймеры в 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 для однократного выполнения через заданное время. Правильное использование этих функций позволяет создавать интерактивные и динамические веб-страницы.

Что будем искать? Например,программа