Skip to content

s09-10.1-timers.md

Latest commit

 

History

History
126 lines (91 loc) · 7.42 KB

s09-10.1-timers.md

File metadata and controls

126 lines (91 loc) · 7.42 KB

Таймеры в JavaScript

Принцип работы setTimeout()

Функция setTimeout() является одним из фундаментальных инструментов работы со временем в JavaScript. Важно понимать её ключевую особенность: она не блокирует выполнение кода и не заставляет интерпретатор ждать истечения указанного времени перед продолжением работы.

Рассмотрим пример:

console.log("Начало выполнения");
setTimeout(() => { console.log("Сообщение после таймаута"); }, 1000);
console.log("Конец выполнения");

Все три строки этого кода выполняются практически мгновенно. Функция setTimeout() немедленно возвращает управление, регистрируя переданную callback-функцию для будущего выполнения. Само сообщение "Сообщение после таймаута" появится только после истечения 1000 миллисекунд.

Таймаут с нулевой задержкой

Если опустить второй аргумент setTimeout(), он по умолчанию равен 0:

setTimeout(() => { console.log("Нулевая задержка"); });

Это не означает, что функция будет вызвана немедленно. Вместо этого она регистрируется для выполнения "как можно скорее". В условиях высокой загрузки браузера (обработка пользовательского ввода, других событий) это может занять 10 миллисекунд или более.

Такой подход используется для отложенного выполнения кода, позволяя текущему стеку вызовов завершиться перед выполнением зарегистрированной функции.

Многократное выполнение с setInterval()

В отличие от setTimeout(), который выполняет функцию один раз, setInterval() предназначен для многократного выполнения:

// Выводим сообщение каждые 2 секунды
const intervalId = setInterval(() => {
    console.log("Повторяющееся сообщение");
}, 2000);

Функция setInterval() принимает те же два аргумента, что и setTimeout(), но выполняет переданную функцию повторно через каждый указанный интервал времени.

Отмена выполнения: clearTimeout() и clearInterval()

Обе функции возвращают идентификатор, который можно использовать для отмены запланированного выполнения:

// Запланировать выполнение
const timeoutId = setTimeout(() => {
    console.log("Это сообщение не появится");
}, 5000);

// Отменить выполнение
clearTimeout(timeoutId);

Аналогично работает с setInterval():

let counter = 0;
const intervalId = setInterval(() => {
    counter++;
    console.log(`Счётчик: ${counter}`);
    
    if (counter >= 5) {
        clearInterval(intervalId); // Останавливаем после 5 выполнений
        console.log("Интервал остановлен");
    }
}, 1000);

Тип возвращаемого значения может отличаться в разных средах выполнения (число в браузерах, объект в Node.js), но это не должно вас беспокоить — просто рассматривайте это значение как непрозрачный идентификатор.

Практический пример: цифровые часы

Давайте создадим простые цифровые часы с использованием Console API:

// Создаем часы, которые обновляются каждую секунду
let clock = setInterval(() => {
    console.clear(); // Очищаем консоль
    console.log("Текущее время: " + new Date().toLocaleTimeString());
}, 1000);

// Останавливаем часы через 10 секунд
setTimeout(() => { 
    clearInterval(clock); 
    console.log("Часы остановлены");
}, 10000);

В этом примере:

  1. setInterval() обновляет время каждую секунду
  2. setTimeout() останавливает обновление через 10 секунд
  3. clearInterval() прекращает повторное выполнение

Особенности и важные замечания

Точность временных интервалов: Указанное время является минимальной, а не точной задержкой. JavaScript — однопоточный язык, и если поток занят выполнением другого кода, выполнение callback-функции будет отложено.

Накопление ошибок: При использовании setInterval() важно понимать, что если выполнение функции занимает больше времени, чем интервал, вызовы будут накапливаться в очереди. В таких случаях часто предпочтительнее использовать рекурсивный setTimeout():

// Рекурсивный setTimeout вместо setInterval
function repeat() {
    console.log("Выполнение");
    setTimeout(repeat, 1000); // Планируем следующее выполнение
}
setTimeout(repeat, 1000);

Контекст выполнения: Callback-функции теряют контекст this, поэтому при работе с методами объектов используйте стрелочные функции или привязку контекста:

const obj = {
    value: 42,
    start() {
        setInterval(() => {
            console.log(this.value); // Правильно: 42
        }, 1000);
    }
};

Заключение

Понимание работы setTimeout() и setInterval() критически важно для эффективного программирования на JavaScript. Эти функции позволяют управлять временем выполнения кода, создавать анимации, обрабатывать пользовательский ввод с задержкой и многое другое. Помните об их асинхронной природе и используйте возвращаемые идентификаторы для контроля над запланированными выполнениями.