Асинхронность в JS
Когда программа последовательно выполняет JavaScript код, от строчки к строчке, то такой код называется синхронным. В примере ниже, в консоль поочередно выведутся строки в том порядке, в каком они написаны. В принципе с синхронностью все понятно.
console.log('первая строка');
console.log('вторая строка');
Но когда строчка кода, стоящая ниже, выполнится раньше верхней строчки, то мы имеем дело с асинхронностью. Код выполняется не последовательно. Самый простой пример асинхронной работы кода - это таймер. Таймер позволяет отложить на какое-то время, выполнение определенного куска кода. И при этом не блокирует работу остального кода, выжидая заданное время задержки. Через заданное время, таймер запустит функцию - произойдет асинхронное выполнение кода.
В браузере есть встроенная функция (метод) - setTimeout(), который первым параметром принимает, какую-ту функцию. Вторым параметром - количество миллисекунд, через которые должна выполниться эта функция.
Как вы думаете, в какой последовательности выполнится этот код?
console.log('1');
console.log('2');
window.setTimeout(function(){
console.log('3');
}, 2000);
console.log('4(end)');
// 1
// 2
// 4(end)
// 3
Мы видим, что код выполняется последовательно до метода setTimeout(), затем последняя строчка опережает третью. Как это работает? Браузерный интерпретатор доходит до setTimeout(), регистрирует его и помещает в режим ожидания. Далее переходит на следующую строчку, выполняет её и по истечении 2 секунд, возвращается к setTimeout() для выполнения передаваемой функции. Среда исполнения не начнет обрабатывать таймер, пока не будет выполнен основной поток кода. Это правило работает даже в том случае, если срок выполнения таймера уже просрочен.
Для детального понимания работы интерпретатора, давайте копнем немного глубже. Для наглядности, добавим ещё один setTimeout() с задержкой в 1 секунду.
function otherTimeout(){
console.log('1 секунда');
};
setTimeout(otherTimeout, 1000);
Порядок вывода в консоли будет следующий:
// 1 секунда
// 2 секунды
Вы видите, что первым вывелся нижний таймаут с более короткой задержкой, что логично. Но нам все равно интересно, а что там происходит за кулисами? Как интерпретатор разруливает, что за чем выполняется. Что в JS за эти стоит?
Event Loop
Все обнаруженные setTimeout-ы становятся в очередь. У них регистрируется время задержки. Цикл event loop пробегается по очереди и если видит, что время задержки истекает, то закидывает функцию обратно в стек вызовов и выполняет её. Иными словами, функции будут отрабатывать не по порядковому номеру, а по мере истечения срока задержки.
Метод setTimeout() не является единственным признаком асинхронности. Кроме него есть и другие, например:
- слушатель событий addEventListener
- методы работы с сервером
Асинхронность не дает программе притормозить и подождать до истечения окончания времени задержки. В других языках программирования для параллельного выполнения кода, можно создавать многопоточность. JavaScript достаточно эффективно работает в одном потоке, позволяя одновременно выполнять различные операции. По сути, отсутствие поддержки многопоточности в JS, компенсируется моделью событийного цикла - event loop.
JavaScript - это главный язык для фронтэнд разработки, не имеющий конкурентов в своей нише. Однако, для более-менее крупных и средних проектов, никто не пишет на чистом JS, без использования библиотек и фреймворков. Самый лучший способ выучить новую технологию, начать использовать её на практике. Именно поэтому наш видео-курс по React построен на практических занятиях, постепенно переходя от простого к сложному. Присоединяйтесь к нам! Вы ничем не рискуете: Вы либо получите отличный результат, либо назад деньги.
-
Создано 30.12.2019 10:03:41
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.