Асинхронность в JavaScript — важная концепция, позволяющая выполнять операции без блокировки основного потока. Рассмотрим работу Event Loop на примере функции setTimeout.
Синхронные операции
Простейшие операции в JavaScript выполняются синхронно. Например, вызов console.log("Старт"); выведет сообщение «Старт» немедленно. Последующий вызов console.log("Старт 2"); отобразит сообщение в консоли после первого, в порядке вызова в коде. Выполнение кода происходит последовательно, строка за строкой.
Асинхронные операции с setTimeout
Для асинхронного выполнения кода используется функция setTimeout. Это метод глобального объекта window, предоставляемый браузером.
Функция setTimeout принимает два аргумента:
- Функция, выполняемая асинхронно. Может быть анонимной функцией или ссылкой на существующую функцию.
- Время задержки в миллисекундах.
Пример:
setTimeout(function() {
console.log("Inside setTimeout, 2 seconds");
}, 2000);
В этом примере функция console.log("Inside setTimeout, 2 seconds"); выполнится через 2 секунды. Последующие синхронные операции (например, console.log("And");) будут выполнены до срабатывания setTimeout.
Event Loop
Механизм, обеспечивающий асинхронность, называется Event Loop. При вызове setTimeout интерпретатор JavaScript:
- Регистрирует переданную в setTimeout функцию в веб-API.
- Продолжает выполнение синхронного кода, не ожидая завершения таймера.
- После истечения времени функция из setTimeout помещается в очередь обратных вызовов (callback queue).
- Event Loop постоянно отслеживает очередь. Когда стек вызовов (call stack) пуст, Event Loop берёт первую функцию из очереди и помещает её в стек для выполнения.
setTimeout(0)
Часто на собеседованиях задают вопрос о работе setTimeout(0). Несмотря на нулевую задержку, функция не выполняется мгновенно. Она регистрируется в веб-API, помещается в очередь и выполняется только после очистки стека вызовов.
Event Loop — ключевой механизм асинхронности в JavaScript. Он позволяет обрабатывать множество асинхронных операций без блокировки основного потока. Понимание работы Event Loop необходимо для эффективного написания асинхронного кода, особенно при работе с браузерными событиями и сетевыми запросами. В последующих уроках будут рассмотрены более сложные асинхронные конструкции, такие как Promises и async/await.