Как называется механизм очередности выполнения операций?

Event Loop - механизм очередности выполнения операций

Механизм очередности выполнения операций в JavaScript называется Event Loop (или Message Queue в более старых описаниях). Это центральная часть архитектуры JavaScript runtime, которая управляет порядком выполнения асинхронного кода.

Call Stack (стек вызовов)

Первое, что нужно понять - это Call Stack (стек вызовов). Это механизм, который отслеживает текущие функции, которые выполняются:

function first() {
  console.log('First');
  second();
  console.log('First end');
}

function second() {
  console.log('Second');
  third();
  console.log('Second end');
}

function third() {
  console.log('Third');
}

first();
// Вывод:
// First
// Second
// Third
// Second end
// First end

Здесь Call Stack работает так:

1. first() добавляется в стек
2. Внутри first() добавляется second()
3. Внутри second() добавляется third()
4. third() выполняется и удаляется из стека
5. second() продолжает выполнение и удаляется
6. first() завершается и удаляется

Event Loop и асинхронность

Event Loop работает совместно с Web APIs, Callback Queue и Microtask Queue:

function log(message) {
  console.log(message);
}

log('Script start');

setTimeout(() => {
  log('setTimeout');
}, 0);

Promise.resolve()
  .then(() => log('Promise 1'))
  .then(() => log('Promise 2'));

log('Script end');

// Вывод:
// Script start
// Script end
// Promise 1
// Promise 2
// setTimeout

Почему такой порядок? Потому что:

1. Синхронный код (log('Script start') и log('Script end')) выполняется первым
2. Затем выполняются микротаски (Promises, async/await, queueMicrotask)
3. Затем выполняются макротаски (setTimeout, setInterval, setImmediate)

Иерархия очередей

// Макротаска
setTimeout(() => {
  console.log('1. Макротаска 1');
  
  // Микротаска внутри макротаски
  Promise.resolve().then(() => {
    console.log('2. Микротаска');
  });
}, 0);

// Микротаска
Promise.resolve().then(() => {
  console.log('3. Микротаска вне макротаски');
  
  // Макротаска внутри микротаски
  setTimeout(() => {
    console.log('4. Макротаска 2');
  }, 0);
});

console.log('5. Синхронный код');

// Вывод:
// 5. Синхронный код
// 3. Микротаска вне макротаски
// 1. Макротаска 1
// 2. Микротаска
// 4. Макротаска 2

Подробное объяснение Event Loop

Шаги Event Loop:

1. Выполняет весь синхронный код (Call Stack должен быть пуст)
2. Проверяет Microtask Queue (Promises, async/await, queueMicrotask)
3. Выполняет все микротаски до очистки очереди
4. Выполняет одну макротаску (setTimeout, setInterval)
5. Опять проверяет Microtask Queue (может заполниться при выполнении макротаски)
6. Повторяет процесс

Практический пример

function example() {
  return Promise.resolve();
}

console.log('start');

example()
  .then(() => {
    console.log('promise 1');
    return Promise.resolve();
  })
  .then(() => {
    console.log('promise 2');
  });

setTimeout(() => {
  console.log('timeout');
}, 0);

queueMicrotask(() => {
  console.log('microtask');
});

console.log('end');

// Вывод:
// start
// end
// promise 1
// microtask
// promise 2
// timeout

Виды очередей в JavaScript

1. Call Stack - где выполняется синхронный код
2. Microtask Queue - Promises, async/await, queueMicrotask()
3. Macrotask Queue - setTimeout, setInterval, setImmediate, I/O
4. Animation Frames Queue - requestAnimationFrame (выполняется после микротасок, до следующей макротаски)

Основное правило: всегда выполняй все микротаски перед переходом к следующей макротаске. Это критически важно для правильной работы асинхронного кода и избежания ошибок в приложении.