Таймеры и периодические вызовы.

Таймер позволяет задавать вызов функции через заданный период времени. В частности, эта возможность поддерживается в браузерах и в сервере 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 функция или функция обратного вызова, которая запускается при успешном завершении операции обращения к серверу.