JavaScript с нуля

Задержка с помощью setTimeout

Функция setTimeout позволяет откладывать выполнение заданного кода. Вариант ее использования достаточно интересен. С помощью этой функции мы можем обозначить, какой код выполнять и сколько миллисекунд должно пройти, прежде чем это выполнение произойдет. На практике она выглядит примерно так:

let timeoutID = setTimeout(someFunction, delayInMilliseconds);

Немного углубимся в этот пример. Допустим, нужно, чтобы функция showAlert была вызвана через 5 секунд. В этом случае объявление функции setTimeout будет выглядеть так:

function showAlert() {

alert("moo!");

}

let timeoutID = setTimeout(showAlert, 5000);

Круто, не правда ли? Теперь поговорим о чем-то менее интересном, что позволит внести большую ясность в эту тему. Это что-то связано с переменной timeoutID, инициализированной как функция setTimeout. Эта переменная появилась не случайно. Если понадобится вновь обратиться к таймеру setTimeout, то потребуется способ, как сослаться на него. Самый легкий способ — это ассоциирование переменной с объявлением setTimeout.

Вы можете поинтересоваться, а зачем вообще повторно обращаться к таймеру? Что ж, единственная причина, которая приходит на ум, — для его отмены. Можно легко отменить функцию setTimeout с помощью функции clearTimeout, в которую в качестве аргумента нужно передать ID таймаута (timeoutID):

clearTimeout(timeoutID);

Если вы вообще не планируете отменять установленный таймер, можете использовать setTimeout напрямую, не прибегая к инициализации переменной.

Давайте поговорим о том, когда это применяется на практике, а именно при разработке UI (пользовательского интерфейса). При его разработке откладывание некоторых действий на определенное время достаточно распространено.

Например, когда меню разворачивается и сворачивается обратно через несколько секунд, если пользователь с ним не взаимодействует.

Или в случае, когда есть некая операция, которая выполняется слишком долго и не может завершиться, а функция setTimeout прерывает эту операцию и возвращает контроль пользователю.

Мой любимый пример (которому я также посвятил целый урок) — это использование функции setTimeout, чтобы определить, активен ли пользователь или отсутствует.

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