0Pricing
JavaScript Academy · Урок

Цикл событий и основы задач и микрозадач

Посмотрите, как цикл событий сначала выполняет синхронный код, затем микрозадачи и задачи. Попрактикуйтесь с setTimeout, Promise.then и queueMicrotask

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

Введение в цикл событий

Цель: изучить основной порядок выполнения: синхронный код → микрозадачи (промис/queueMicrotask) → задачи (setTimeout).

  • Сначала синхронный код
  • Затем микрозадачи
  • В конце задачи
Цикл событий и основы задач и микрозадач — иллюстрация 1

Сначала синхронный код

Синхронные инструкции выполняются сверху вниз до любых поставленных в очередь функций обратного вызова.

// Sync code runs immediately
console.log("A: sync start");

console.log("B: sync middle");

console.log("C: sync end");
Цикл событий и основы задач и микрозадач — иллюстрация 2

Основы очереди задач

setTimeout помещает задачу в очередь. Она выполняется после завершения текущего цикла.

// Tasks (macrotasks) via setTimeout
console.log("1: start");

setTimeout(function () {
  console.log("3: timeout task");
}, 0);

console.log("2: after scheduling");
Цикл событий и основы задач и микрозадач — иллюстрация 3

Основы микрозадач

Promise.then добавляет микрозадачу. Микрозадачи выполняются сразу после синхронного кода и до задач.

// Microtasks via Promise.then
console.log("X: sync");

Promise.resolve().then(function () {
  console.log("Y: microtask");
});

console.log("Z: after scheduling microtask");
Цикл событий и основы задач и микрозадач — иллюстрация 4

Демонстрация порядка выполнения

Ожидаемый порядок: Начало → Конец → Микрозадача → Задача.

// Order demo: microtask runs before task
console.log("Start");

setTimeout(function () {
  console.log("Task: timeout");
}, 0);

Promise.resolve().then(function () {
  console.log("Microtask: promise");
});

console.log("End");
Цикл событий и основы задач и микрозадач — иллюстрация 5

Демонстрация queueMicrotask

queueMicrotask также планирует микрозадачу. Для плавной работы приложений делайте функции обратного вызова небольшими.

// queueMicrotask is another way to schedule a microtask
console.log("S");

queueMicrotask(function () {
  console.log("M: microtask");
});

console.log("E");

// Tip: do not overuse microtasks; keep callbacks tiny
Цикл событий и основы задач и микрозадач — иллюстрация 6

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

Быстрая проверка: правило порядка выполнения.

Цикл событий и основы задач и микрозадач — иллюстрация 7

Повторение

Повторение: цикл сначала выполняет синхронный код, затем опустошает очередь микрозадач, а после этого выполняет задачи. Используйте setTimeout для задач, а Promise.then и queueMicrotask — для микрозадач.

Цикл событий и основы задач и микрозадач — иллюстрация 8

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

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

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

Чему я научусь в уроке «Цикл событий и основы задач и микрозадач»?

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

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

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

Сколько времени занимает урок «Цикл событий и основы задач и микрозадач»?

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

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

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

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

  1. Цикл событий и основы задач и микрозадач
  2. Промисы — состояния, цепочки и обработка ошибок
  3. Promise.all / any / race / allSettled — выбираем подходящий инструмент
← Назад к JavaScript Academy