Асинхронные паузы в JavaScript: Promises против Async/Await

JavaScript, будучи однопоточным, не имеет прямого аналога функции sleep(), встречающейся в других языках. Имитация паузы требует использования асинхронных техник. В этой статье рассматриваются два подхода: один с использованием setTimeout и Promise, а другой — с более чистым синтаксисом async/await.

Содержание

• Реализация функции Sleep с помощью Promise
• Реализация функции Sleep с помощью Async/Await

Реализация функции Sleep с помощью Promise

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

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

sleep(2000)
  .then(() => console.log("Проспал 2 секунды!"))
  .catch(error => console.error("Произошла ошибка:", error));

console.log("Это выполнится до завершения функции sleep.");

Пояснение:

• sleep(ms): Эта функция принимает в качестве аргумента длительность сна в миллисекундах (ms).
• new Promise(resolve => setTimeout(resolve, ms)): Создается Promise. setTimeout планирует вызов функции resolve через ms миллисекунд. Это разрешает Promise, сигнализируя о завершении сна.
• .then(): Этот блок обрабатывает разрешенный Promise, выполняя находящийся в нем код после завершения сна.
• .catch(): Этот необязательный блок обрабатывает любые ошибки, которые могут возникнуть во время таймаута.

Этот метод эффективен и позволяет избежать недостатков блокировки основного потока. Однако использование .then() может показаться менее интуитивным для некоторых программистов.

Реализация функции Sleep с помощью Async/Await

Async/await предлагает более читаемое и, возможно, более элегантное решение. Он основан на подходе на основе Promise, но упрощает асинхронный поток.

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

async function myFunction() {
  console.log("Начало...");
  await sleep(2000);
  console.log("Проспал 2 секунды!");
}

myFunction();
console.log("Это выполнится до завершения функции sleep.");

Пояснение:

• async function sleep(ms): Ключевое слово async обозначает асинхронную функцию.
• await new Promise(...): Ключевое слово await приостанавливает выполнение sleep до тех пор, пока Promise не будет разрешен. Эта пауза не блокирует основной поток.
• async function myFunction(): Эта функция демонстрирует, как использовать sleep в рамках более крупной асинхронной операции.

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

Оба метода достигают одинакового результата, но async/await предлагает более современный и читаемый синтаксис для обработки асинхронных операций в JavaScript. Избегайте циклов ожидания в рабочем коде; они заблокируют ваше приложение.