JavaScript с нуля - [16]
Однако это вовсе не значит, что нет способа препятствовать мгновенному выполнению кода. Если немного отклониться от основной темы, можно обнаружить три функции, позволяющие это делать, — setTimeout, setInterval и requestAnimationFrame. В этом разделе мы рассмотрим назначение и применение каждой из них.
Поехали!
Задержка с помощью 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, то найдете множество реальных примеров, где она может очень пригодиться.
Выполнение циклов с помощью setInterval
Следующая функция-таймер, которую мы рассмотрим, — это setInterval. Она похожа на setTimeout в том, что позволяет выполнять код спустя определенное время. Отличие же ее в том, что она не просто выполняет код один раз, а продолжает его повторное выполнение бесконечно.
Вот как она используется:
let intervalID = setInterval(someFunction, delayInMilliseconds);
За исключением имени, способ использования функции setInterval идентичен способу применения setTimeout. Первый аргумент определяет встроенный код или функцию, которую нужно выполнить. Второй аргумент определяет время задержки (интервал) между выполнениями. При желании вы также можете инициализировать функцию setInterval как переменную для хранения ID интервала, который позднее сможете использовать, например, для прекращения выполнения.
Отлично! Теперь, когда вы уже знакомы с процессом, рассмотрите пример кода, выполняющего функцию drawText с интервалом между циклами в 2 секунды:
Для прекращения выполнения цикла мы можем использовать функцию clearInterval с соответствующим аргументом:
clearInterval(intervalID);
Используется она в точности как clearTimeout — мы передаем ей ID таймера setInterval, который при желании можем задать в момент его создания.
В реальной жизни функция setInterval долгое время оставалась основной функцией для создания анимации в JavaScript. Например, если потребуется получить 30 или 60 кадров в секунду, вы будете «играть» со значением задержки времени примерно так:
// 1000 разделить на 60 — это значение в миллисекундах для 60fps
setInterval(moveCircles, 1000 / 60);
Чтобы увидеть работу setInterval и в других реалистичных примерах на самом сайте, загляните в конец статьи «Создание симпатичного слайдера контента» (https://www.kirupa.com/html5/creating_a_sweet_content_slider.htm) или прочтите материал «Создание аналоговых часов» (https://www.kirupa.com/html5/create_an_analog_clock_using_the_canvas.htm). И там и там вы найдете достаточно яркие примеры использования setInterval.
