Главная->Уроки по js->Асинхронность в JS

Асинхронность в JS

08 Июн в 00:00

Когда программа последовательно выполняет 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 построен на практических занятиях, постепенно переходя от простого к сложному. Присоединяйтесь к нам! Вы ничем не рискуете: Вы либо получите отличный результат, либо назад деньги.