JavaScript: добавление функции ожидания/паузы через setTimeout

Быстрый ответ

Реализовать временную задержку выполнения кода на JavaScript возможно с использованием функции sleep, которая создаётся с помощью Promise и setTimeout. Взаимодействовать с ней следует через async/await:

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function delayedLog() {
  console.log('Ожидание — самое сложное...');
  await sleep(2000); // Пауза на 2 секунды, примерно как время ожидания за кофе ☕
  console.log('Наконец-то моя очередь!');
}

delayedLog();

Сначала код выполнит вывод сообщения "Ожидание — самое сложное...", затем установит двухсекундную паузу, и после скрипт выведет "Наконец-то моя очередь!".

Взгляд изнутри: Разбираемся с async/await

Функция, объявленная с ключевым словом async, возвращает Promise. Когда мы используем await, мы как бы приостанавливаем выполнение функции до тех пор, пока Promise не выполнится.

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

Возможные проблемы при использовании sleep

Чрезмерное применение sleep может привести к ухудшению пользовательского опыта из-за долгих перерывов в работе, напоминающих бесконечную рекламу на YouTube.

Практическое применение sleep/wait

Временные уведомления для пользователя

Ожидание позволяет пользователю внимательно прочитать уведомление, перед тем как оно исчезнет или обновится.

Подробнее об этом расскажет наш спикер на видео

Плавные анимационные переходы

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

Вызовы API и регулировка нагрузки

Введение пауз между операциями с использованием API помогает избежать перегрузок, снижая напряжение как для системы, так и для пользователя.

Распространенные ошибки и способы их устранения

Неверное понимание setTimeout

Если вы думаете, что setTimeout приостанавливает выполнение кода, вы ошибаетесь. Это не пауза, а команда запуска задачи через указанный промежуток времени.

Зацикливание колбэков

Остерегайтесь глубоко вложенных колбэков с использованием setTimeout, чтобы ваш код не стал похожим на «ад колбэков».

Блокировка основного потока выполнения

Воздерживайтесь от использования синхронных операций ожидания в циклах. Это может привести к блокированию выполнения скриптов и ухудшению пользовательского опыта.

Визуализация

Механизм работы функции sleep можно наглядно проиллюстрировать на примере светофора:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function sequentialFlow() {
  console.log("🚦 Красный цвет — стоп!");
  await sleep(3000); // Задержка в 3 секунды, например, время придумывания идеи.
  console.log("🟢 Зеленый цвет — можно ехать!");
}

sequentialFlow();

Таким образом, мы видим ситуацию, аналогичную движению в "час пик":

До `await sleep`:  🚗🚗🚗(Остановка на красный)
После `await sleep`:   🚗🚗🚗(Движение по зелёному)

Как в жизни: переходим из красного света в зелёный и дорога открыта для движения.

Готовые решения

Promise и отложенное выполнение

Вы можете использовать цепочки Promise с .then вместо async/await:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Немного подождите...');
sleep(2000).then(() => {
  console.log('Дождались! 🎉');
});

Генераторы

Для сложного управления потоками выполнения sleep можно применить генераторы JavaScript:

function* generatorSleepWorkflow() {
  console.log('Шаг 1: Начинаем с двух кружочков ⚫⚫');
  yield sleep(2000);
  console.log('Шаг 2: Добавляем детали — и это сова 🦉');
  yield sleep(2000);
  console.log('Вот и готово!');
}

const iterator = generatorSleepWorkflow();
iterator.next().value.then(() => iterator.next());

setInterval: применяйте аккуратно!

setInterval работает как перманентный будильник. Крайне важно аккуратно применять этот метод и не забывать вызывать clearInterval, чтобы не попасть в "День сурка".

Полезные материалы