Функция 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;

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

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

let i = 0;

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

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