Создаём callback
Достаточно разговоров, давайте создадим callback!
Во-первых, откройте Chrome Developer Console (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J) и введите следующий код функции:
function doHomework(subject) {alert( Starting my ${subject} homework. );}
Итак, выше мы создали функцию . Наша функция берёт одну переменную, это . Вызовите функцию, введя следующее в вашу консоль:
doHomework('math');// Alerts: Starting my math homework.
Теперь давайте добавим callback — как последний параметр в функции , мы можем передать callback. Callback-функция теперь является вторым аргументом вызова .
function doHomework(subject, callback) {alert( Starting my ${subject} homework. );callback();}doHomework('math', function() {alert('Finished my homework');});
Как вы видите, введя код выше в вашу консоль, вы получите один за другим два оповещения. Первое starting homework и второе, которое последует за ним finished homework.
Но колбэкам необязательно всегда быть определенными в вызове функции. Они могут быть определены где угодно в коде. Например как тут:
function doHomework(subject, callback) {alert( Starting my ${subject} homework. );callback();}function alertFinished(){alert('Finished my homework');}doHomework('math', alertFinished);
Результат этого примера точно такой же, как и результат предыдущего, но настройка идёт немного по-другому. Как вы видите, мы передали функцию как аргумент, во время вызова функции .
Пройти параметры для Settimout
В основной схеме предпочтительно, чтобы параметр пропускал параметр обратным вызова поперечному браузеру.Является первым параметром, используя анонимную функцию.
В приведенном ниже примере мы выбираем из случайных поздравленийМассив и используйте случайные поздравления в качестве параметров дляФункция, это выполняетсяВозьмите вторую задержку:
Другой подход
Как видно из этого Существует второй метод передачи параметров к обратным вызова исполнения 。 Это связано с любыми параметрами после запуска.
Обратитесь к нашему предыдущему примеру, это даст нам:
К сожалению, это не работает, IE9 или ниже, где передаются параметры 。 Однако есть, однако, 。
Асинхронные функции с async/await
Функция позволяет обрабатывать асинхронный код так, чтобы он выглядел синхронным. функции также используют промисы под капотом, но имеют более традиционный синтаксис JavaScript. Рассмотрим примеры этого синтаксиса.
Вы можете создать функцию, добавив ключевое слово перед функцией:
// Создать async функцию
async function getUser() {
return {}
}
Хотя эта функция еще не обрабатывает ничего асинхронного, она ведет себя иначе, чем традиционная функция. Но! Если вы выполните функцию, вы обнаружите, что она возвращает обещание с и вместо возвращаемого значения.
Попробуйте вывод в консоль, вызвав функцию :
console.log(getUser())
Вы увидите следующее:
Output __proto__: Promise `PromiseStatus`: "fulfilled" `PromiseValue`: Object
Это означает, что вы можете обрабатывать асинхронную функцию с помощью так же, как и промис. Протестируйте это с помощью следующего кода:
getUser().then((response) => console.log(response))
Этот вызов передает возвращаемое значение анонимной функции, которая записывает значение в консоль.
При запуске этой программы вы получите следующее:
Output
{}
Асинхронная функция может обрабатывать промис, вызываемый в ней, с помощью оператора ожидания . Этот оператор может использоваться в асинхронной функции и будет ждать, пока промис не разрешится, перед выполнением назначенного кода.
Теперь мы можем переписать запрос Fetch из последнего раздела с помощью async/await следующим образом:
// Обработка fetch при помощи async/await
async function getUser() {
const response = await fetch('https://api.github.com/users/octocat')
const data = await response.json()
console.log(data)
}
// Выполнение async функции
getUser()
Здесь операторы гарантируют, что данные не будут выводиться в консоль, пока запрос не заполнит их данными.
Теперь окончательные данные можно обрабатывать внутри функции без необходимости использования :
Output login: "octocat", id: 583231, avatar_url: "https://avatars3.githubusercontent.com/u/583231?v=4" blog: "https://github.blog" company: "@github" followers: 3203 ...
Примечание. Во многих средах асинхронный режим необходим для использования , однако некоторые новые версии браузеров и Node позволяют использовать верхнего уровня, что позволяет обойтись без создания асинхронной функции для обертывания .
Наконец, поскольку мы обрабатываем выполненное обещание в асинхронной функции, вы также можете обрабатывать ошибку внутри функции. Вместо использования метода с , для обработки исключения вы будете использовать шаблон /.
// Обработка success и errors при помощи async/await
async function getUser() {
try {
// Обработка success
const response = await fetch('https://api.github.com/users/octocat')
const data = await response.json()
console.log(data)
} catch (error) {
// Обработка ошибки в catch
console.error(error)
}
}
Программа теперь перейдет к блоку , если получит ошибку, и запишет эту ошибку в консоль.
Современный асинхронный код JavaScript чаще всего обрабатывается с синтаксисом /, но важно иметь практические знания о том, как работают промисы, тем более что промисы могут иметь дополнительные функции, которые не могут быть обработаны с помощью /, например, объединение обещаний с. Заключение
Заключение
Поскольку веб-API часто предоставляют данные асинхронно, изучение того, как обрабатывать результат асинхронных действий, является важной частью работы разработчика JavaScript. Мы рассмотрели, как среда хоста использует цикл событий для обработки порядка выполнения кода со стеком и очередью
Мы также опробовали примеры трех способов обработки успеха или отказа асинхронного события с помощью обратных вызовов, промисов и синтаксиса /. Наконец, мы использовали Fetch Web API для обработки асинхронных действий.
Читайте больше по теме:
More Examples
Display an alert box after 3 seconds (3000 milliseconds):
let timeout;
function myFunction() {
timeout = setTimeout(alertFunc, 3000);}
function alertFunc() { alert(«Hello!»);}
Display a timed text:
let x = document.getElementById(«txt»);
setTimeout(function(){ x.value = «2 seconds» }, 2000);setTimeout(function(){ x.value = «4 seconds» }, 4000);setTimeout(function(){ x.value = «6 seconds» }, 6000);
Open a new window and close the window after three seconds (3000
milliseconds):
const myWindow = window.open(«», «», «width=200, height=100»);
setTimeout(function() {myWindow.close()}, 3000);
Count forever — but with the ability to stop the count:
function startCount()function stopCount()
A clock created with timing events:
function startTime() {
const date = new Date();
document.getElementById(«txt»).innerHTML = date.toLocaleTimeString();
setTimeout(function() {startTime()}, 1000);
}
Pass parameters to the function (does not work in IE9 and earlier):
setTimeout(myFunc, 2000, «param1», «param2»);
However, if you use an anonymous function, it will work in all browsers:
setTimeout(function() {myFunc(«param1», «param2»)}, 2000);
Модель цикла событий
Как setTimeout () работает в однопоточном движке Javascript? Здесь мы упомянем модель цикла событий в ядре браузера. Проще говоря, существует очередь задач вне механизма выполнения Javascript. Когда в коде вызывается метод setTimeout (), зарегистрированный метод задержки будет передан другим модулям ядра браузера (в случае webkit это модуль webcore) Обработка, когда метод задержки достигает условия триггера, то есть достигается установленное время задержки, метод задержки добавляется в очередь задач. Этот процесс обрабатывается другими модулями ядра браузера и не зависит от основного потока механизма выполнения.Когда механизм выполнения завершает выполнение метода основного потока и достигает состояния ожидания, он будет последовательно получать задачи из очереди задач для выполнения. Этот процесс представляет собой непрерывный цикл. Процесс называется моделью цикла событий.
Ссылаясь на информацию в лекции, описанная выше модель цикла событий может быть описана следующим рисунком.
При запуске основного потока механизма выполнения Javascript генерируются куча и стек. Код в программе последовательно входит в стек и ожидает выполнения. Когда вызывается метод setTimeout (), то есть когда метод WebAPIs в правой части рисунка, соответствующий модуль ядра браузера запускает обработку метода задержки. Когда метод задержки достигает условия триггера, метод становится Добавлен в очередь задач для обратных вызовов, пока выполняется код в стеке механизма выполнения, основной поток будет читать очередь задач и по очереди выполнять функции обратного вызова, которые удовлетворяют условиям триггера.
Используйте примеры из лекции для дальнейшего объяснения Группа обмена обучением JavaScript: 615496236; Если взять в качестве примера код на рисунке, когда механизм выполнения начинает выполнять приведенный выше код, это эквивалентно добавлению метода main () в стек выполнения. Когда вы продолжаете запускать console.log (‘Hi’), метод log (‘Hi’) находится в стеке. Метод console.log является распространенным методом, поддерживаемым ядром webkit, а не методом, задействованным в WebAPI на предыдущем рисунке, поэтому войдите здесь Метод (‘Hi’) немедленно извлекается из стека и выполняется движком. Группа обмена обучением JavaScript: 615496236; После завершения выполнения оператора console.log («Hi») метод log () выполняется вне стека, и выводится Hi. Движок продолжает работу и добавляет setTimeout (callback, 5000) в стек выполнения. Метод setTimeout () принадлежит методу в WebAPI в модели цикла событий. Когда механизм извлекает метод setTimeout () из стека, функция отложенного выполнения передается соответствующему модулю, то есть модулю таймера справа от рисунка. Когда механизм выполнения извлекает setTimeout из стека, он передает метод обработки задержки модулю таймера webkit для обработки, а затем немедленно продолжает обработку следующего кода, поэтому добавляется журнал (‘SJS’) Стек выполняется, затем журнал (‘SJS’) извлекается из стека и выполняется, и выводится SJS. После того, как механизм выполнения выполняет console.log (‘SJS’), программа обрабатывается, и метод main () также извлекается из стека.Группа обмена обучением JavaScript: 615496236;
В это время, через 5 секунд после выполнения метода setTimeout, модуль таймера обнаруживает, что метод обработки задержки достиг условия триггера, поэтому он добавляет метод обработки задержки в очередь задач. В это время стек выполнения механизма выполнения пуст, поэтому механизм начинает опрос очереди задач, чтобы проверить, есть ли задача, которая должна быть выполнена, а затем проверяет, достиг ли метод задержки условия выполнения, а затем добавляет метод задержки в стек выполнения. Механизм обнаруживает, что метод задержки вызывает метод log (), а затем помещает метод log () в стек. Затем стек выполнения последовательно выталкивается и выполняется, выводится туда, и стек выполнения очищается.
После очистки стека выполнения механизм выполнения продолжит опрос очереди задач, чтобы проверить, есть ли задачи для выполнения.
Группа обмена обучением JavaScript: 615496236;
setInterval
The method has the same syntax as :
All arguments have the same meaning. But unlike it runs the function not only once, but regularly after the given interval of time.
To stop further calls, we should call .
The following example will show the message every 2 seconds. After 5 seconds, the output is stopped:
Time goes on while is shown
In most browsers, including Chrome and Firefox the internal timer continues “ticking” while showing .
So if you run the code above and don’t dismiss the window for some time, then the next will be shown immediately as you do it. The actual interval between alerts will be shorter than 2 seconds.
Async Await JS
Конструкция также использует объекты promise для создания асинхронных запросов, но делает написание нашего кода заметно проще.
Async await позволяет писать асинхронный код, так как будто он является синхронным.
Для использования нужно указать, что наша функция будет содержать асинхронный код, путем добавления слова .
1asyncfunctioneatBreakfast(){}
Далее, внутри функции нужно отметить словом те строчки, в которых содержится асинхронный код.
1
2constgetToast=()=>{
3returnnewPromise((resolve, reject)=>{
4setTimeout(()=>{
5resolve('Ваш тост готов!');
6},1000);
7});
8};
9
10
11constgetCoffee=()=>{
12returnnewPromise((resolve, reject)=>{
13setTimeout(()=>{
14resolve('Ваш кофе готов!');
15},2000);
16});
17};
18
19
20constbreakfast=asyncfunction(){
21
22const toast =awaitgetToast();
23
24const coffee =awaitgetCoffee();
25
26
27constmyToast, myCoffee=awaitPromise.all(toast, coffee);
28console.log(myToast, myCoffee);
29
30};
31
32breakfast();
Сопутствующие проблемы и “this”
Код, исполняемый setTimeout, запускается отдельно от функции, которой он был вызван. Из-за этого мы сталкиваемся с определенными проблемами, в качестве решения которых можно использовать ключевое слово this.
var person = {
firstName: "Jim",
introduce: function(){
console.log("Hi, I'm " + this.firstName);
}
};
person.introduce();
// Outputs: Hi, I'm Jim
setTimeout(person.introduce, 50);
// Outputs: Hi, I'm undefined
Причина такого вывода кроется в том, что в первом примере this ведет к объекту person, а во втором примере — указывает на глобальный объект window, у которого отсутствует свойство firstName.
Чтобы избавиться от этой нестыковки, можно воспользоваться несколькими методами:
Принудительно установить значение this
Это можно сделать при помощи bind() – метода, который создает новую функцию, которая при вызове в качестве значения ключа this использует определенное значение. В нашем случае — указанный объект person. Это в результате дает нам:
setTimeout(person.introduce.bind(person), 50);
Примечание: метод bind был представлен в ECMAScript 5, а значит, что он будет работать только в современных браузерах. В других при его применении вы получите ошибку выполнения JavaScript «function timeout error».
Использовать библиотеку
Многие библиотеки включают в себя встроенные функции, необходимые для решения проблемы с this. Например, метод jQuery.proxy(). Он берет функцию и возвращает новую, в которой всегда будет использовать определенный контекст. В нашем случае, контекстом будет:
setTimeout($.proxy(person.introduce, person), 50);
Посмотреть демо
Отключение таймера
Возвращенное значение setTimeout представляет собой числовой id, который можно использовать для отключения таймера при помощи функции clearTimeout():
var timer = setTimeout(myFunction, 3000); clearTimeout(timer);
Давайте посмотрим на нее в действии. В следующем примере, если кликнуть по кнопке «Start countdown», начнется обратный отсчет. После того, как он завершится, котята получат свое. Но если нажать кнопку «Stop countdown», таймер JavaScript timeout будет остановлен и сброшен.
Посмотреть пример
setTimeout и setInterval
В JavaScript имеются методы, которые позволяют вызвать функцию не сразу, а через некоторый промежуток времени (в асинхронном режиме). Называются они и .
Отличаются они друг от друга лишь тем, что выполняет вызов функции всего один раз, а – постоянно через указанный интервал времени.
Синтаксис и :
// setTimeout window.setTimeout(func ); // setInterval window.setTimeout(func );
Параметры:
- – функция, которую нужно вызвать спустя указанное в количество миллисекунд;
- – количество миллисекунд по истечении которых нужно выполнить ;
- – дополнительные аргументы, которые нужно передать в .
Например, вызовем функцию один раз по прошествии 3 секунд:
// функция
function myFunc() {
console.log('after 3 seconds');
}
// вызовем функцию myFunc после 3 секунд
window.setTimeout(myFunc, 3000);
// выведем сообщение в консоль
console.log('immediately');
При выполнение этого кода программа не остановится на месте, где мы зарегистрировали некоторую асинхронность посредством и не будет блокировать её дальнейшее выполнение на 3 секунды, через которые нужно будет вызвать . Выполнение скрипта продолжится дальше и сначала браузер выведет в консоль сообщение «immediately», а затем через 3 секунды – «after 3 seconds».
Другими словами, когда браузер доходит до исполнения , он как бы помещает функцию в некоторое место, а затем по прошествии определённого количества времени её вызывает. При этом блокировка основного потока выполнения программы не происходит.
Чтобы более подробно разобраться в этом необходимо рассмотреть, как движок JavaScript выполняет синхронный и асинхронный код, а также что такое event loop и как он работает.
Синхронный и асинхронный код
Но перед тем, как переходить к асинхронными операциям, следует сначала в общих чертах разобраться как выполняется синхронный код.
Выполнение такого кода движок JavaScript выполняет последовательно (т.е. строчку за строчкой). При этом перед тем, как выполнить какую-то строчку кода интерпретатор сначала помещает её в стек вызовов (call stack). Именно в нём происходит её разбор и исполнение. После этого происходит её извлечение из стека и переход к следующей строчке.
Но всё меняется, когда интерпретатор доходит до выполнения асинхронных операций, например . Они также как и синхронные операции сначала попадают в стек вызовов, где происходит их разбор. Но, при разборе интерпретатор понимает, что это некоторый вызов Web API и помещает эту операцию в него. После этого он удаляет эту строчку из call stack и переходит к выполнению следующей строчки кода.
В это же время Web API регистрирует эту функцию и запускает таймер. Как только он завершается, он помещает эту функцию в очередь (callback queue). Очередь – это структура данных типа FIFO. Она хранит все функции в том порядке, в котором они были туда добавлены.
Очередь обратных вызовов (callback queue) обрабатывает цикл событий (event loop). Он смотрит на эту очередь и на стек вызовов (call stack). Если стек вызовов пуст, а очередь нет – то он берёт первую функцию из очереди и закидывает её в стек вызовов, в котором она уже выполняется. Вот таким образом происходит выполнения асинхронного кода в JavaScript.
Если функцию необходимо вызывать не один раз, а постоянно через каждые 3 секунды, то тогда вместо следует использовать :
window.setInterval(myFunc, 3000);
Пример, с передачей функции аргументов:
function sayHello(name) {
alert(`Привет, ${name}!`);
}
setTimeout(sayHello, 3000, 'Василий'); // Привет, Василий!
Пример, с использованием в анонимной функции:
setTimeout(function (name) {
alert(`Привет, ${name}!`);
}, 3000, 'Василий');
В и можно также вместо функции передавать строку с кодом, который нужно выполнить через определённый интервал времени. Но этот вариант использовать не рекомендуется по тем же причинам, что и функцию .
Если функция по каким-то причинам не работает, то проверьте действительно ли вы передаёте ссылку на функцию, а неё результат:
function sayHello() {
console.log('Привет!');
}
// передаём в setTimeout не ссылку на функцию sayHello, а результат её вызова
setTimeout(sayHello(), 3000);
Используем requestAnimationFrame
Этому методу должна быть передана колбэк функция, которая отвечает за отрисовку одного кадра вашей анимации. Для того, чтобы создать полную анимацию, вам понадобится сделать этот колбэк рекурсивным.
Временная метка с высоким разрешением DOMHighResTimeStamp передаётся колбэку. Вам не понадобится всегда это использовать, но это может быть довольно полезным для некоторых анимаций.
Пример ниже показывает то, как настроить рекурсивную функцию, которая использует .
// Анимируемfunction animate(highResTimestamp) {requestAnimationFrame(animate);// Анимируем что-нибудь…}// Запускаем анимацию.requestAnimationFrame(animate);
Стоит упомянуть, что у вас есть только 16.67 миллисекунд, чтобы отрендерить каждый кадр. С точки зрения времени это не очень хорошо, так что вам нужно быть осторожным с тем, что вы хотите выполнить внутри колбэк функции. Если ваш кадр требует больше 16.67 секунд на обработку, то анимация может выйти не совсем плавной.
отдаст , который может быть использован для отмены запланированного кадра анимации.
var requestID = requestAnimationFrame(animate);
Функции обратного вызова
В примере функция с тайм-аутом запускалась после всего в основном контексте выполнения верхнего уровня. Но если вы хотите, чтобы одна из функций, например третья функция, выполнялась после тайм-аута, вам придется использовать методы асинхронного кодирования. Тайм-аут здесь может представлять собой асинхронный вызов API, который содержит данные. Вы хотите работать с данными из вызова API, но сначала убедитесь, что данные возвращаются.
Первоначальное решение этой проблемы — использование функций обратного вызова (callback functions). Функции обратного вызова не имеют специального синтаксиса; это просто функция, переданная в качестве аргумента другой функции. Функция, которая принимает другую функцию в качестве аргумента, называется функцией высшего порядка. Согласно этому определению, любая функция может стать функцией обратного вызова, если она передана в качестве аргумента. Обратные вызовы не являются асинхронными по своей природе, но могут использоваться для асинхронных целей.
Вот пример синтаксического кода функции высшего порядка и обратного вызова:
// Функция
function fn() {
console.log('Just a function')
}
// Функция, которая принимает другую функцию в качестве аргумента
function higherOrderFunction(callback) {
//Когда вы вызываете функцию, которая передается в качестве аргумента, она называется обратным вызовом.
callback()
}
// Передача функции
higherOrderFunction(fn)
В этом коде вы определяете функцию , определяете функцию , которая принимает обратный вызов функции в качестве аргумента, и передаете в качестве обратного вызова в .
Выполнение этого кода даст следующее:
Output Just a function
Вернемся к первой, второй и третьей функциям с . Вот что у вас есть на данный момент:
function first() {
console.log(1)
}
function second() {
setTimeout(() => {
console.log(2)
}, 0)
}
function third() {
console.log(3)
}
Задача состоит в том, чтобы функция всегда откладывала выполнение до завершения асинхронного действия в функции. Вот здесь и появляются обратные вызовы. Вместо выполнения , и на верхнем уровне выполнения вы передадите функцию в качестве аргумента . функция выполнит обратный вызов после завершения асинхронного действия.
Вот три функции с примененным обратным вызовом:
// Определите три функции
function first() {
console.log(1)
}
function second(callback) {
setTimeout(() => {
console.log(2)
// Выполнить функцию обратного вызова
callback()
}, 0)
}
function third() {
console.log(3)
}
Теперь выполняется и , затем передается в качестве аргумента :
first() second(third)
После запуска этого блока кода вы получите следующий вывод:
Output 1 2 3
Сначала будет напечатано , а после того, как таймер завершится (в данном случае ноль секунд, но вы можете изменить его на любое значение), он напечатает , затем . Передав функцию в качестве обратного вызова, вы успешно отложили выполнение до завершения асинхронного веб-API ().
Ключевой вывод здесь заключается в том, что функции обратного вызова не являются асинхронными — — это асинхронный веб-API, отвечающий за обработку асинхронных задач. Обратный вызов просто позволяет вам быть проинформированным о завершении асинхронной задачи и обрабатывает успех или неудачу задачи.
Теперь, когда мы узнали, как использовать обратные вызовы для обработки асинхронных задач, разберемся с проблемами вложенности слишком большого количества обратных вызовов и создания «пирамиды гибели».
Usage and Purpose
Sometimes it is necessary to program a function call in a specific moment. The JavaScript function is ready to help you with this task-scheduling by postponing the execution of a function until the specified time.
Let’s say you are a developer who wants to enhance user experience in their website. One of the possible features to include is to schedule a message to be displayed after users scroll down to the end of the page. JavaScript function can help you set timeout for the method and impress your website visitors with a new feature.
Please bear in mind that the setTimeout JavaScript function will execute functions once. If you want the function to be repeated multiple times, you should use .
Pros
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
Main Features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion
EXCLUSIVE: 75% OFF 
Pros
- Easy to navigate
- No technical issues
- Seems to care about its users
Main Features
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
AS LOW AS 12.99$ 
Pros
- Great user experience
- Offers quality content
- Very transparent with their pricing
Main Features
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
75% DISCOUNT
Callback arguments
As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either setTimeout() or setInterval() . The following IE-specific
code demonstrates a method for overcoming this limitation. To use, simply add the following code to the top of your script.
Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:
Var intervalID = setInterval(function() { myFunc(«one», «two», «three»); }, 1000);
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
Inactive tabs
Requires Gecko 5.0(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)
Starting in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), intervals are clamped to fire no more often than once per second in inactive tabs.
Рекурсивный setTimeout
Метод запускает функцию каждые n миллисекунд, не обращая внимания на то, когда она завершится.
Если функция каждый раз срабатывает с одним и тем же временным интервалом, тогда все в порядке:
Функция срабатывает с одним и тем же временным интервалом
Но бывают случаи, когда время выполнения меняется в зависимости от условий сети, например:
Время выполнения может меняться
Или перекрывает следующее:
Время выполнения перекрывает следующее за ним
Чтобы избежать последствий подобных случаев, вы можете запланировать рекурсивный вызов по завершении функции обратного вызова.
Для наглядности рассмотрим распространенный пример сервиса по отправке запросов на сервер, который при перегрузке последнего увеличивал бы интервал следующего запроса:
let delay = 5000;
let timerId = setTimeout(function request() {
...функционал для отправки запроса...
if ( сервер перегружен ) {
// увеличиваем интервал последующего запроса
delay *= 2;
}
timerId = setTimeout(request, delay);
}, delay);
C рекурсивным мы можем изменять последующий вызов, исходя из результата предыдущего.
Схема здесь такая:
Фиксированная временная задержка
Другими словами, такой подход дает фиксированную временную задержку, ведь новый вызов планируется, когда закончился вызов перед ним.
Итого
- Методы и позволяют запускать регулярно/один раз через миллисекунд.
- Оба метода возвращают идентификатор таймера. Его используют для остановки выполнения вызовом .
- В случаях, когда нужно гарантировать задержку между регулярными вызовами или гибко её менять, вместо используют рекурсивный .
- Минимальная задержка по стандарту составляет . Браузеры соблюдают этот стандарт, но некоторые другие среды для выполнения JS, например Node.JS, могут предоставить и меньше задержки.
- В реальности срабатывания таймера могут быть гораздо реже, чем назначено, например если процессор перегружен, вкладка находится в фоновом режиме, ноутбук работает от батареи или по какой-то иной причине.
Браузерных особенностей почти нет, разве что вызов с нулевой задержкой в IE недопустим, нужно указывать .
