Как сделать задержку в JavaScript через setTimeout?
Хочу, чтобы сообщение появилось через 2 секунды после загрузки. Слышал про setTimeout, но не понял, куда передавать функцию и куда — время. Можно пример, как сделать задержку правильно?
2 ответа
setTimeout(функция, задержка_в_миллисекундах) выполнит функцию один раз через указанное время.
setTimeout(() => {
console.log('Прошло 2 секунды!');
}, 2000); // 2000 мс = 2 секунды
Первый аргумент — функция, второй — задержка в миллисекундах (1 секунда = 1000 мс).
Отменить запланированный таймер можно через clearTimeout, сохранив id:
const id = setTimeout(() => console.log('не выполнится'), 5000);
clearTimeout(id); // отменили
Для повторения каждые N мс — setInterval (и clearInterval для остановки):
const id = setInterval(() => console.log('тик'), 1000);
// остановить: clearInterval(id);
Частые ошибки:
- Вызвать функцию вместо передачи ссылки:
setTimeout(sayHi(), 1000); // неправильно — sayHi выполнится сразу
setTimeout(sayHi, 1000); // правильно — через секунду
- Думать, что
setTimeoutблокирует код. Он асинхронный — код после него выполнится сразу, не дожидаясь таймера:
console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');
// порядок вывода: 1, 3, 2
Даже с задержкой 0 колбэк уйдёт в очередь и выполнится после текущего кода.
Если нужна задержка внутри async-функции (чтобы код реально «подождал»), оберни setTimeout в промис:
const delay = (ms) => new Promise(r => setTimeout(r, ms));
async function run() {
console.log('старт');
await delay(1000);
console.log('через секунду');
}
run();
Тут await ставит выполнение на паузу на секунду, не блокируя весь поток. Голый setTimeout так «ждать» не умеет.