По умолчанию код выполняется синхронно. Проще говоря, это значит, что выполнение инструкции происходит сразу, как только до нее доходит очередь. В этом процессе нет никаких и, если или но. Возможность задержки выполнения кода или откладывания его на потом не характерна для работы JavaScript по умолчанию. Мы видели нечто подобное, когда изучали циклы. Цикл выполняется со скоростью света без малейших задержек между итерациями. Это в значительной степени способствует скоростным вычислениям, но в то же время мешает, если мы хотим производить обновление в более размеренном (то есть медленнее) темпе.
Однако это вовсе не значит, что нет способа препятствовать мгновенному выполнению кода. Если немного отклониться от основной темы, можно обнаружить три функции, позволяющие это делать, — 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.
Плавная анимация с помощью requestAnimationFrame
Настало время перейти к моей любимой функции: requestAnimatonFrame. Эта функция создана для синхронизации кода с событием перерисовки содержимого браузера. Поясняю подробнее: в любой момент браузер занят обработкой миллиона различных элементов. Среди них: манипуляции с макетом, реакция на прокрутку страниц, прослушивание кликов мыши, отображение результатов нажатий клавиатуры, исполнение кода, загрузки ресурсов и т. д. Одновременно со всем этим он также перерисовывает экран со скоростью 60 кадров в секунду, ну или пытается это делать.
Если у вас есть код, запускающий какую-либо анимацию на экране, скорее всего, вам захочется, чтобы эта анимация выполнялась корректно и не затерялась в остальной мешанине действий, выполняемых браузером. В таких случаях использование ранее отмеченной техники setInterval не гарантирует, что скорость обновления не упадет, когда браузер будет занят оптимизацией других элементов. Чтобы браузер не приравнивал код, отвечающий за анимацию, любому другому JavaScript-коду, существует функция requestAnimationFrame. Браузеры воспринимают эту функцию особым образом, что позволяет задавать время ее выполнения наиболее оптимально, избегая провала частоты кадров, а также ненужных действий и прочих побочных эффектов, мешающих применению других решений, связанных с выполнением циклов.
Запуск этой функции почти такой же, как в случае с setTimeout / setInterval:
let requestID = requestAnimationFrame(someFunction);
Единственное заметное отличие состоит в том, что мы не задаем значение продолжительности. Это значение вычисляется автоматически в зависимости от: текущей скорости обновления кадров, активна ли текущая вкладка или нет, работает ли устройство от батареи или сети и многих других факторов, выходящих далеко за пределы нашего контроля и понимания.
Тем не менее подобное использование функции requestAnimationFrame — лишь учебный пример. В реальности вам вряд ли придется вызывать requestAnimationFrame всего лишь раз, как в нашем примере. Ключом ко всем анимациям, создаваемым в JavaScript, является анимационный цикл, и именно к этому циклу нам нужно применить requestAnimationFrame. Результат такого применения выглядит следующим образом:
function animationLoop() {
// код, отвечающий за анимацию
requestAnimationFrame(animationLoop)
}
// Начать выполнение цикла анимации!
animationLoop();
Обратите внимание, что наша функция requestAnimationFrame определяет выполнение вызова функции animationLoop каждый раз, когда браузер производит обновление. Выглядит это так, как будто функция requestAnaimationFrame вызывает animationLoop напрямую, что не совсем так. И это вовсе не ошибка в коде. Несмотря на то что такой вид циклической зависимости на практике гарантированно привел бы к зависанию браузера, реализация requestAnimationFrame этого избегает. Наоборот, она обеспечивает вызов animationLoop именно такое число раз, чтобы гарантированно отобразить плавную и текущую анимацию. При этом не возникает проблем с функционированием остальных приложений.
Чтобы узнать подробнее о функции requestAnimationFrame и ее основном использовании для создания крутых анимаций, ознакомьтесь со статьей «Анимации в JavaScript» (https://www.kirupa.com/html5/animating_in_code_using_javascript.htm). В этом разделе также более глубоко освещена тема использования requestAnimationFrame и рассмотрены аспекты, не затронутые в текущей главе.
КОРОТКО О ГЛАВНОМ
Если вы считаете, что таймеры применяются в более узкой сфере, чем такие важные элементы, как инструкции if…else и циклы, пройденные нами ранее, то вы, скорее всего, правы. Вы можете создать множество прекрасных приложений, не прибегая к использованию setTimeout, setInterval или requestAnimationFrame. Тем не менее это не отменяет того, что знать их обязательно. Однажды наступит тот час, когда вам потребуется отложить выполнения кода, продолжительное выполнение цикла или создать приятную анимацию с помощью JavaScript. И когда этот момент наступит, вы будете готовы! Ну или по крайней мере будете знать, что гуглить.
Чтобы увидеть, как применяются эти функции-таймеры в рабочей среде, ознакомьтесь с приведенными ниже статьями и примерами, которые помогут лучше усвоить материал:
• Создание анимаций с помощью requestAnimationFrame (http://bit.ly/kirupaAnimationsJS).
• Создание симпатичного слайдера контента (http://bit.ly/sliderTutorial).
• Создание аналоговых часов (http://bit.ly/kirupaAnalogClock).
• Генератор припадка (http://bit.ly/kirupaSeizureGenerator).(Спойлер: анимация на этом сайте бешено мерцает.)
Я уже неоднократно отмечал, что JavaScript может вызвать ступор, в особенности когда дело доходит до таймеров. Если у вас возникнут сложности, я и другие опытные разработчики с радостью вам поможем. Обращайтесь на форум https://forum.kirupa.com, и мы выведем вас из ступора.