JavaScript Academy · Урок

Макрозадачи и очередь задач

Разберитесь, как планируются таймеры и операции ввода-вывода.

«Макрозадачи и очередь задач» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое макрозадача

Макрозадача (также называемая задачей) — это единица работы, запланированная на более позднее время, после завершения текущего синхронного кода. Классический пример — обратные вызовы setTimeout.

Макрозадачи ждут в очереди задач, пока стек вызовов не освободится.

setTimeout откладывает работу

setTimeout регистрирует обратный вызов для последующего выполнения. Даже при задержке 0 он выполняется после всего текущего синхронного кода.

console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');

Очередь задач

Когда срабатывает таймер, его обратный вызов помещается в очередь задач. Цикл событий берёт из этой очереди одну задачу только после освобождения стека вызовов, выполняет её до конца, а затем снова проверяет очередь.

console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');

Задачи выполняются в порядке постановки

Задачи с одинаковой задержкой выполняются в порядке, в котором они были запланированы. Очередь задач работает по принципу FIFO: первым вошёл — первым вышел.

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');

Задержка — минимум, а не точное время

Переданная задержка — это минимальное время до того, как обратный вызов сможет быть выполнен. Фактическое выполнение происходит только после освобождения стека и завершения более ранних задач, поэтому оно может начаться позже.

setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');

Сортировка по задержке

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

setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');

Одна задача за один оборот цикла

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

console.log('1');
setTimeout(() => {
  console.log('2');
  setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);

Вложенные таймеры ставятся в очередь позже

Таймер, запланированный внутри задачи, присоединяется к очереди после уже ожидающих задач, поэтому выполняется на одном из следующих оборотов цикла.

setTimeout(() => {
  console.log('outer');
  setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);

setInterval также создаёт макрозадачи

setInterval планирует повторяющуюся макрозадачу. Здесь мы выполняем несколько итераций и останавливаем её с помощью clearInterval, чтобы ограничить объём вывода.

let count = 0;
const id = setInterval(() => {
  count++;
  console.log('tick ' + count);
  if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');

Синхронный код всегда выполняется первым

Какой бы маленькой ни была задержка, каждая макрозадача ждёт завершения всего синхронного кода в текущем запуске. Сначала стек должен освободиться.

setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');

Зачем нужны макрозадачи

Макрозадачи позволяют отложить работу, не блокируя выполнение. Разбиение тяжёлой задачи на части, запускаемые по таймеру, сохраняет отзывчивость приложения. Однако у макрозадач не самый высокий приоритет: микрозадачи (промисы) выполняются перед следующей макрозадачей, как вы увидите далее.

console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');

Быстрая проверка

Когда выполняется обратный вызов setTimeout(cb, 0)?

Повторение: макрозадачи

Вы узнали, как планируется отложенная работа:

Макрозадачи (setTimeout, setInterval) ждут в очереди задач.
Очередь работает по принципу FIFO, а цикл событий выполняет одну задачу за оборот.
Задержка является минимальной, а синхронный код всегда выполняется первым.
Микрозадачи имеют более высокий приоритет, и далее вы изучите их подробнее.

Часто задаваемые вопросы

Урок «Макрозадачи и очередь задач» бесплатный?

Да — полный текст урока «Макрозадачи и очередь задач» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Макрозадачи и очередь задач»?

Разберитесь, как планируются таймеры и операции ввода-вывода. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Макрозадачи и очередь задач»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy