Задержка выполнения кода в 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.