Как подождать перед выполнением кода

Короткий ответ

setTimeout() запускает функцию через заданное число миллисекунд:

setTimeout(() => console.log('one second later'), 1000);
 
console.log('right now');

Результат:

right now
one second later

Функция sleep

Оберните setTimeout() в промис, и ждать можно будет через await:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
console.log('start');
await sleep(500);
console.log('half a second later');

Результат:

start
half a second later

Паузы в цикле

С await внутри цикла for...of каждый шаг ждёт предыдущий:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
for (const step of [3, 2, 1]) {
  console.log(step);
  await sleep(300);
}
console.log('Go!');

Результат:

3
2
1
Go!

Отмена

setTimeout() возвращает идентификатор. clearTimeout() отменяет запланированный вызов:

const timer = setTimeout(() => console.log('never shown'), 1000);
clearTimeout(timer);
 
console.log('cancelled');

Результат:

cancelled

Частая ошибка

setTimeout() не останавливает программу: код после него выполняется сразу. А forEach() не ждёт await в своей функции, поэтому все паузы начинаются одновременно:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const start = Date.now();
 
[1, 2, 3].forEach(async (n) => {
  await sleep(300);
  console.log(n, Date.now() - start < 400 ? 'all at once' : 'one by one');
});

Результат:

1 all at once
2 all at once
3 all at once

Спасибо, что читаете!

Короткий ответ

Функция sleep

Паузы в цикле

Отмена

Частая ошибка

Функции из этого ответа

Спасибо, что читаете!