Функция setTimeout в JavaScript

Давайте теперь разберем функцию setTimeout, которая позволяет сделать задержку перед запуском кода. Эта задержка, в отличии от функции setInterval, случится только один раз.

Первым параметром setTimeout принимает исходный код функции, а вторым - задержку в миллисекундах перед запуском этой функции.

Посмотрим работу функции на каком-нибудь примере. Пусть у нас есть вот такая кнопка:

<input type="submit" id="elem">

Давайте сделаем так, чтобы по нажатию на кнопку на экран вывелся alert, но не сразу, а через 3 секунды после нажатия :

let elem = document.querySelector('#elem'); elem.addEventListener('click', function() { setTimeout(function() { alert('!'); }, 3000); });

Дан абзац. Напишите код, который выведет сообщение в этот абзац через 10 секунд после загрузки страницы.

Запуск таймера

Хотя функция setTimeout и не предназначена для создания таймеров, однако их все равно можно делать с ее помощью, если воспользоваться рекурсией:

let i = 0; setTimeout(function timer() { console.log(++i); timer(); // вызовем сами себя }, 3000);

Остановить такой таймер можно просто не дав случится рекурсии:

let i = 0; setTimeout(function timer() { console.log(++i); if (i <= 10) { // запускаем, только если счетчик меньше 10 timer(); } }, 3000);

Выведите в консоль число 0. Через секунду выведите число 1, через две секунды выведите число 2, через 3 секунды выведите число 3. И так далее до бесконечности.