Таймеры и периодические вызовы.
Таймер позволяет задавать вызов функции через заданный период времени. В частности, эта возможность поддерживается в браузерах и в сервере Node.JS.
SetTimeout
Синтаксис:
var timerId = setTimeout(func, delay[, arg1, arg2...])
Параметры:
func - функция для исполнения
delay - задержка в миллисекундах
arg1, arg2… - аргументы, которые нужно передать функции
Исполнение функции произойдёт спустя время, указанное в параметре delay.
Например, следующий код вызовет func() через одну секунду:
function func() {
alert( 'Привет' );
}
setTimeout(func, 1000);
С передачей аргументов:
function func(phrase, who) {
alert( phrase + ', ' + who );
}
setTimeout(func, 1000, "Привет", "Вася"); // Привет, Вася
Отмена исполнения clearTimeout
Функция setTimeout возвращает числовой идентификатор таймера timerId, который можно использовать для отмены действия.
Синтаксис:
var timerId = setTimeout(...);
clearTimeout(timerId);
SetInterval
Метод setInterval имеет синтаксис, аналогичный setTimeout:
var timerId = setInterval(func, delay[, arg1, arg2...])
Смысл аргументов – тот же самый. Но, в отличие от setTimeout, он запускает выполнение функции не один раз, а регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом clearInterval(timerId).
Следующий пример при запуске станет выводить сообщение каждые две секунды, пока не пройдёт 5 секунд:
// начать повторы с интервалом 2 сек
var timerId = setInterval(function() {
alert( "тик" );
}, 2000);
// через 5 сек остановить повторы
setTimeout(function() {
clearInterval(timerId);
alert( 'стоп' );
}, 5000);
var requestID = window.requestAnimationFrame( callback );
— вызвать функцию callback перед следующей перерисовкой браузером содержимого окна. Частота обновления обычно соответствует частоте обновления экрана. Функция callback может принимать один аргумент timestamp, соответствующий времени вызова функции, в милисекундах. Возвращает числовой идентификатор данного запроса кадра.
window.cancelAnimationFrame( requestID );
— прервать запрос следующего кадра перерисовки с заданным requestID.
Цикл событий, принципы работы асинхронности.
Event Loop
В JavaScript имеется только один поток выполнения и один стэк, в который помещаются функции в очередь на выполнение. Это означает, что в один момент времени JavaScript может выполнить только одну операцию, другие операции при этом будут ждать своей очереди в стэке, пока их не вызовут.
Помимо стэка в браузерах присутствует особая очередь для работы с WebAPI, такими как: клики, таймауты, AJAX-запросы, веб-воркеры. Функции из этой очереди выполнятся по порядку только после того, как стэк будет полностью очищен. Только после этого они помещаются из очереди в стэк на выполнение. Если в стэке в данный момент находится хотя бы один элемент, то они в стэк попасть не могут. Как раз именно из-за этого вызов функций по таймаута часто бывает не точным по времени, так как функция не может попасть из очереди в стэк, пока он заполнен.
В JavaScript Event Loop работает следующим образом. Сначала в стэк попадает главная функция сценария. Над ней в стэк сверху падают функции, которые она вызывает по порядку их вызова. Параллельно этому, по мере выполнения функций из стэка, в очередь событий браузера попадают клики, таймауты, AJAX-запросы, веб-воркеры. Функции из стэка вызываются идя сверху вниз. По мере выполнения функций из стэка они удаляются из него. Как только стэк полностью очищается в него по очереди по одиночке начинают попадать функции из очереди событий, которые начинают заполнять стэк вызовом своих функции. По мере выполнения этих функций стэк опять очищается, тем самым позволяя попасть в него следующей функции из очереди событий. Таким образом весь процесс повторяется.
Асинхронное программирование в JavaScript
Асинхронное программирование в JavaScript не связано с многопоточностью. JavaScript – однопоточный, это означает, что не существует стандартных языковых конструкций, которые позволят создать в приложении дополнительный поток для выполнения параллельных вычислений. Асинхронное программирование – стиль программирования, при котором результат работы функций доступен не сразу, а через некоторое время. Асинхронная функция – это функция, после вызова которой JavaScript приложение продолжает работать, потому что функция сразу выполняет возврат. Результат работы асинхронной функции становится известным позже, и для того, чтобы оповестить наше приложении о полученных значениях, асинхронная функция вызывает другую функцию (callback), которую мы передаем в аргументах при запуске.
Например, getDataFromServer(onSuccess); getDataFromServer – асинхронная функция, выполняющая запрос на сервер, onSuccess – callback функция или функция обратного вызова, которая запускается при успешном завершении операции обращения к серверу.