Практический JavaScript: Таймеры, скролл и создание интерактивных слайдеров

По умолчанию код в JavaScript выполняется синхронно: движок читает строку, выполняет её и только потом переходит к следующей. Это предсказуемо, но в реальных веб-приложениях часто требуется управлять временем. Например, необходимо скрыть всплывающее уведомление через пять секунд, запустить обратный отсчет до начала акции или заставить слайдер автоматически перелистывать картинки каждые три секунды.

Для решения этих задач в JavaScript используются встроенные функции-таймеры. Они позволяют отложить выполнение кода или запускать его регулярно, не блокируя при этом работу остальной страницы.

Отложенное выполнение: setTimeout

Функция setTimeout позволяет выполнить определенный блок кода один раз спустя заданный промежуток времени. Это асинхронная операция: браузер регистрирует таймер и продолжает выполнять следующий за ним код, не дожидаясь окончания паузы.

Синтаксис функции выглядит следующим образом:

Разберем аргументы:

callback — функция, которая должна быть выполнена.

delay — время задержки в миллисекундах. Важно помнить, что .

arg1, arg2 — необязательные параметры, которые будут переданы внутри функции callback.

Представьте, что вы поставили пирог в духовку и завели кухонный таймер на 40 минут. Вы не стоите перед плитой всё это время, а идете заниматься своими делами. Когда таймер зазвенит, вы вернетесь и достанете пирог. setTimeout работает точно так же.

Рассмотрим практический пример: показ рекламного баннера через 3 секунды после загрузки страницы.

Если запустить этот код, в консоли сначала мгновенно появится сообщение о загрузке страницы, и только спустя 3 секунды отобразится текст баннера.

Отмена запланированного действия

Иногда возникает необходимость отменить запланированное действие до того, как оно выполнится. Например, пользователь сам закрыл окно, и нам больше не нужно его автоматически скрывать.

При вызове setTimeout возвращает специальное число — идентификатор таймера (timerId). Это уникальный номер «билетика» в очереди задач. Чтобы отменить выполнение, этот идентификатор нужно передать в функцию clearTimeout.

Регулярное повторение: setInterval

Если setTimeout выполняет код единожды, то функция setInterval запускает его бесконечное количество раз с фиксированной паузой между вызовами.

Синтаксис абсолютно идентичен:

Аналогией из реальной жизни может служить метрополитен: поезда прибывают на станцию каждые 5 минут в течение всего дня.

Эта функция идеально подходит для создания таймеров обратного отсчета. Напишем скрипт, который отсчитывает 10 секунд, а затем останавливается. Для остановки интервала используется функция clearInterval, которая работает по тому же принципу, что и отмена таймаута.

В чем принципиальная разница?

| Характеристика | setInterval | Рекурсивный setTimeout | | :--- | :--- | :--- | | Отсчет времени | Начинается сразу после предыдущего вызова | Начинается только после завершения предыдущей задачи | | Пауза между задачами | Нестабильная (может сокращаться до нуля) | Строго фиксированная (всегда равна заданному delay) | | Риск наслоения | Высокий, если задача выполняется дольше интервала | Отсутствует, задачи выполняются строго последовательно |

При создании интерактивных слайдеров, где картинки меняются автоматически, часто используют именно рекурсивный setTimeout. Это гарантирует, что анимация смены одного слайда полностью завершится до того, как начнется отсчет времени до показа следующего.

Ограничения браузеров

При работе с таймерами стоит учитывать еще несколько технических особенностей современных браузеров:

Минимальная задержка. Согласно стандарту HTML5, если таймер вложен друг в друга более 5 раз, браузер принудительно устанавливает минимальную задержку в 4 миллисекунды. Написать таймер с задержкой в 0 или 1 мс для бесконечного цикла не получится.

Неактивные вкладки. В целях экономии заряда батареи (особенно на ноутбуках и смартфонах), браузеры сильно замедляют таймеры в фоновых вкладках. Если пользователь переключился на другой сайт, ваш setInterval с задержкой в 1000 мс может начать срабатывать раз в минуту. Это нужно учитывать при разработке таймеров обратного отсчета — лучше сверять время с системными часами (Date.now()), а не полагаться на количество тиков таймера.

Понимание того, как работают задержки и интервалы, открывает путь к созданию динамичных интерфейсов. Умение управлять временем выполнения кода — это фундамент, на котором строятся анимации, опросы серверов и сложные интерактивные компоненты.