JavaScript: Асинхронность, Event Loop и setTimeout(0)

Асинхронность в JavaScript — важная концепция, позволяющая выполнять операции без блокировки основного потока. Рассмотрим работу Event Loop на примере функции setTimeout.

Синхронные операции

Простейшие операции в JavaScript выполняются синхронно. Например, вызов console.log("Старт"); выведет сообщение «Старт» немедленно. Последующий вызов console.log("Старт 2"); отобразит сообщение в консоли после первого, в порядке вызова в коде. Выполнение кода происходит последовательно, строка за строкой.

Асинхронные операции с setTimeout

Для асинхронного выполнения кода используется функция setTimeout. Это метод глобального объекта window, предоставляемый браузером.

Функция setTimeout принимает два аргумента:

  1. Функция, выполняемая асинхронно. Может быть анонимной функцией или ссылкой на существующую функцию.
  2. Время задержки в миллисекундах.

Пример:

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:

  1. Регистрирует переданную в setTimeout функцию в веб-API.
  2. Продолжает выполнение синхронного кода, не ожидая завершения таймера.
  3. После истечения времени функция из setTimeout помещается в очередь обратных вызовов (callback queue).
  4. Event Loop постоянно отслеживает очередь. Когда стек вызовов (call stack) пуст, Event Loop берёт первую функцию из очереди и помещает её в стек для выполнения.

setTimeout(0)

Часто на собеседованиях задают вопрос о работе setTimeout(0). Несмотря на нулевую задержку, функция не выполняется мгновенно. Она регистрируется в веб-API, помещается в очередь и выполняется только после очистки стека вызовов.

Event Loop — ключевой механизм асинхронности в JavaScript. Он позволяет обрабатывать множество асинхронных операций без блокировки основного потока. Понимание работы Event Loop необходимо для эффективного написания асинхронного кода, особенно при работе с браузерными событиями и сетевыми запросами. В последующих уроках будут рассмотрены более сложные асинхронные конструкции, такие как Promises и async/await.

Что будем искать? Например,программа