Использование и ограничения setTimeout и setInterval в современных браузерах

Мы все используем современные веб-браузеры, и производительность является одним из наиболее важных аспектов просмотра веб-страниц. Современные веб-браузеры должны выполнять сложные программы, а также реагировать на действия пользователей.

setTimeout и setInterval — это два метода в JavaScript, используемые для асинхронного запуска кода или функции, что позволяет нам запускать их через определенные промежутки времени.

Прежде всего, давайте рассмотрим эти два метода и их функциональные возможности. Затем в этой статье будут обсуждаться их ограничения в современных браузерах.

setTimeout

Мы можем использовать метод setTimeout() для запуска функции после указанного времени ожидания. setTimeout() принимает три параметра.

Синтаксис

setTimeout(function|code, delay, arg0,arg1,...)

функция | code: функция, которая должна быть выполнена после указанного времени ожидания. Мы можем включить строку вместо функции, но это не рекомендуется, так как это огромный риск для безопасности.
delay: время в миллисекундах, которое должно пройти между каждым выполнением кода или функции. Значение по умолчанию — 0.
arg1,arg2, .. : дополнительные аргументы, передаваемые функции.

Вот пример отображения строки «Пример setTimeout(), который запустится через секунду». после задержки в одну секунду.

function exampleFunc() {
   alert('Example of a setTimeout(),which will run after a second.');
}
setTimeout(exampleFunc, 1000);

Функция clearTimeout() отменяет событие таймера. Кроме того, он останавливает выполнение функции.

let timerID = setTimeout(exampleFunc, 1000); 
clearTimeout(timerID);

setTimeout с нулевой задержкой

Использование setTimeout() с нулевой задержкой позволяет планировать выполнение функции как можно быстрее после завершения других текущих задач в очереди.

Синтаксис

setTimeout(function|code, 0) 
setTimeout(function|code)

setInterval

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

Синтаксис

setInterval(function|code, delay, arg0,arg1,..)

Вот пример отображения строки «Пример setInterval(), который будет выполняться каждую секунду». каждую секунду.

function exampleFunc2() { 
   alert('Example of a setInterval(),which will run every second.'); 
} 
setInterval(exampleFunc2, 1000);

Функция clearInterval() отменяет события таймера. Кроме того, он останавливает выполнение функции.

let timerID2 = setInterval(exampleFunc2, 1000); 
clearInterval(timerID2);

Что лучше для рекурсивных вызовов?

Следующий вызов планируется начать после текущего с помощью setTimeout(). Поэтому setTimeout() лучше использовать рекурсивно вместо setInterval(), так как он лучше контролирует задержки.

С помощью setTimeout() мы можем определить наш следующий вызов по-разному в зависимости от результатов текущего вызова. Например, если у нас есть сервис, который извлекает или проверяет данные каждые 10 секунд, но сервер перегружен, мы можем увеличить задержку в секундах. Если служба или функция интенсивно использует ЦП, мы можем проанализировать время выполнения и решить, следует ли планировать следующий вызов раньше или позже.

setTimeout и setInterval могут создавать задачи макросов. Макрозадача — это небольшая функция, выполняемая после очистки стека выполнения JavaScript и микрозадач.

Ограничения в современных браузерах

setTimeout и setInterval не точны

Браузер запускает весь JavaScript на вашем сайте в одном потоке. Поэтому setTimeout и setInterval будут добавлены в очередь задач. Цикл событий JavaScript постоянно проверяет очередь задач на наличие событий или задач, ожидающих выполнения. Когда цикл обработки событий обнаруживает, что очередь задач не пуста, он удаляет первую задачу из очереди и выполняет ее.

В этот момент, если запланированное время задачи еще не наступило, задача будет поддерживаться в очереди до тех пор, пока не будет достигнуто запланированное время. Если запланированное время уже прошло, а задача находится в очереди, цикл обработки событий удаляет задачу из очереди и выполняет ее немедленно.

В таких случаях функции выполняются дольше, чем задержка, указанная в методах.

На следующем изображении показано, как все работает в веб-браузере на высоком уровне.

Согласно HTML Living Standard, Этот API не гарантирует, что таймеры будут работать точно по расписанию. Ожидаются задержки из-за загрузки процессора, других задач и т. д..

Задержки в «setTimeout с нулевой задержкой»

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

Согласно HTML Living Standard, таймеры могут быть вложенными друг в друга; однако после пяти таких вложенных таймеров интервал должен составлять не менее четырех миллисекунд.

Хотя вы не установили для setTimeout определенное ограничение по времени, он должен дождаться завершения всего кода для сообщений в очереди.

Подверженность уязвимостям безопасности

Функции setTimeout() и setInterval() могут выполнять указанный через них текст, открывая их для межсайтового скриптинга (XSS) на основе DOM. Поэтому вы не должны передавать какие-либо конфиденциальные данные через эти функции.

Утечки памяти

Во время выполнения программе на JavaScript выделяются три типа памяти: область кода, стек вызовов и куча. Использование setTimeout и setInterval может привести к утечке памяти, так как они будут иметь тяжелые ссылки на объекты, сохраненные в их обратных вызовах или активные в памяти. С другой стороны, необработанные таймеры могут работать бесконечно, если мы забудем сбросить таймер с помощью clearInterval или clearTimeout.

Поддержка браузера

На следующем изображении с сайта mozilla.org показана совместимость браузера с setInterval.

На следующем изображении с сайта mozilla.org показана совместимость браузера с setTimeOut.

Мы должны учитывать эти ограничения при использовании setTimeout и setInterval. Мы можем использовать альтернативы и получить относительно точные заданные интервалы и установить время ожидания, используя оператор while или requestAnimationFrame. Мы не должны передавать строку вместо функции.

Заключение

Методы setTimeout и setInterval используются для планирования задач на определенное время. В этой статье мы обсудили, что это за методы и их ограничения в современных браузерах.

Эти ограничения нельзя воспринимать легкомысленно. Лучше всего выбрать, что использовать, исходя из ваших требований и ограничений браузера.

Спасибо за чтение!

Essential JS 2 от Syncfusion — единственный пакет, который вам понадобится для создания приложения. Он содержит более 80 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить эти элементы управления уже сегодня.

Если у вас есть какие-либо вопросы или комментарии, вы можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 23 марта 2023 г.

Использование и ограничения setTimeout и setInterval в современных браузерах