Avatar ·

Как сделать паузу (sleep) в JavaScript? Аналог sleep() из других языков

Привет! Я новичок в JavaScript, перехожу с Python и PHP. Там есть удобная функция sleep(), которая приостанавливает выполнение кода на заданное количество секунд. Например: ```python print("Начало") time.sleep(3) print("Прошло 3 секунды") ``` В JavaScript я попробовал написать что-то подобное: ```javascript console.log("Начало"); setTimeout(() => {}, 3000); // Надеялся, что это сработает console.log("Прошло 3 секунды"); ``` Но код выполняется мгновенно, без задержки. Я понимаю, что setTimeout — это асинхронная функция, но как мне сделать простую синхронную паузу, чтобы код остановился и подождал? Я видел, что есть функции вроде `sleep` в Node.js, но они не работают в браузере. Пробовал циклы while с проверкой времени, но они вешают браузер. Подскажите, как правильно организовать задержку в JavaScript, чтобы код ждал нужное количество времени, а потом продолжал выполнение? Желательно с примерами для браузера и Node.js. <<>>

Правильный способ: используйте промисы и async/await

В JavaScript нет синхронного sleep(), потому что это заблокировало бы единственный поток выполнения и "подвесило" бы интерфейс. Вместо этого нужно использовать асинхронный подход. Вот как это делается:

// Универсальная функция sleep
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Использование с async/await
async function example() {
  console.log("Начало");
  await sleep(3000); // Ждём 3 секунды
  console.log("Прошло 3 секунды");
}

example();

Как это работает

  • Promise — объект, представляющий будущий результат. Мы создаём его, который "разрешится" (resolve) через указанное время.
  • setTimeout — вызывает resolve через заданное количество миллисекунд.
  • async/await — позволяет писать асинхронный код как синхронный. Ключевое слово await приостанавливает выполнение функции до тех пор, пока Promise не выполнится.

Полный пример для браузера

<button onclick="runDemo()">Запустить демо</button>
<div id="output"></div>

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

async function runDemo() {
  const output = document.getElementById('output');
  
  output.innerHTML += 'Старт!<br>';
  await sleep(1000);
  output.innerHTML += 'Прошла 1 секунда<br>';
  await sleep(2000);
  output.innerHTML += 'Прошло ещё 2 секунды (всего 3)<br>';
  await sleep(500);
  output.innerHTML += 'Готово!<br>';
}
</script>

Пример для Node.js

// Тот же подход работает и в Node.js
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log('Запуск');
  await sleep(2000);
  console.log('Прошло 2 секунды');
}

main();

Важные моменты

  • Не блокирует поток — во время ожидания JavaScript может обрабатывать другие события (клики, таймеры и т.д.)
  • Только внутри async функций — await можно использовать только внутри функций, объявленных с async
  • Миллисекунды — функция принимает миллисекунды, а не секунды. Для 1 секунды пишите sleep(1000)
  • Точность — не гарантируется идеальная точность, но для большинства задач её достаточно
<<>>

Альтернативный подход: синхронная блокировка (только для Node.js)

Если вам критично нужна именно синхронная блокировка (например, в консольных скриптах), в Node.js есть встроенный модуль timers с функцией setTimeoutSync (экспериментальная). Но чаще используют пакет sleep из npm:

// Установка: npm install sleep
const sleep = require('sleep');

console.log('Начало');
sleep.sleep(3); // Блокирует на 3 секунды
console.log('Прошло 3 секунды');

Или можно использовать execSync для имитации:

const { execSync } = require('child_process');
execSync('sleep 3'); // Только на Linux/macOS

Почему это не рекомендуется

  • Блокирует весь процесс — сервер не сможет обрабатывать другие запросы
  • В браузере такие методы вызывают зависание интерфейса
  • Не является стандартным решением в экосистеме JS

Поэтому для 99% случаев используйте async/await с Promise — это современный, безопасный и переносимый подход.