Задержка выполнения кода в JavaScript: правильное использование setTimeout

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

Самый элементарный способ сделать паузу в выполнении кода на 5 секунд в JavaScript выглядит так:

setTimeout(() => {
  // Жизнь полна неожиданностей... Но эта пауза точно не будет лишней
}, 5000);

Функция setTimeout() позволяет отложить исполнение кода на указанное количество миллисекунд.

Не только setTimeout: async/await

Познакомимся с async/await — это синтаксическое явление, которое дает возможность асинхронным операциям выглядеть как синхронные. Рассмотрим случай:

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

async function delayedOperation() {
  console.log('Ожидаем...');
  await wait(5000);
  console.log('И вот, спустя 5 секунд, жизнь всё еще идет своим чередом');
}

delayedOperation();

Сочетание async/await и Promise приводит к повышению читаемости кода, с значительно лучшей обработкой ошибок, и не дает асинхронности сбить с толку.

Нюансы при использовании задержек в коде

Условия гонки — страх каждого разработчика

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

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

Вопрос совместимости

Если встретились с устарельными браузерами, не забудьте, что они вполне могут не поддерживать async/await. В таких ситуациях на помощь могут прийти полифиллы или транспиляторы.

Поддержание чистоты функций

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

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

Пример визуализации процесса задержки на JavaScript:

console.log("Кофе начал завариваться ☕️"); 
setTimeout(() => {
  console.log("Ваш кофе готов ☕️✨"); 
}, 5000);

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

Шаг 1: [☕️ Начало заваривания...]
5-секундное ожидание: (☕️ Остаёмся терпеливыми...)
Шаг 2: [✨ Настало время наслаждаться кофе!]

setTimeout можно представить как внимательного бариста: он принимает заказ (код), делает перерыв (необходимое время для приготовления) и подаёт ваш напиток, когда он уже готов.

Управление последовательными операциями и изменениями состояния

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

async function handleStateChange(newState) {
  await wait(5000);
  // Итак, что нового принёс нам newState?
}

Тщательно тестируйте асинхронные операции, чтобы предотвратить непредвиденные результаты.

Задержка в Node.js с помощью таймеров/промисов

В Node.js есть возможность использовать таймеры в формате async/await:

const { setTimeout: wait } = require('timers/promises');

async function nodeSpecificAction() {
  await wait(5000);
  console.log('Node.js терпеливо ожидал 5 секунд. Аплодисменты!');
}

Используя данный метод, вы получите плавность процесса выполнения операции, при этом не должны будете вручную создавать Promise.