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