JavaScript Academy · Lekcja

queueMicrotask i kolejność wykonywania

Proszę precyzyjnie kontrolować kolejność wykonywania.

queueMicrotask i kolejność wykonywania to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Poznajemy queueMicrotask

queueMicrotask to bezpośredni sposób na zaplanowanie mikrozadania bez tworzenia Promise. Wywołanie zwrotne jest wykonywane po zakończeniu bieżącego kodu synchronicznego, ale przed dowolnym makrozadaniem.

To najczystsze narzędzie do odroczenia pracy do najbliższego punktu sprawdzania mikrozadań.

Podstawowe użycie

Przekaż funkcję do queueMicrotask. Zostanie ona wykonana po zakończeniu kodu synchronicznego.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

Taki sam priorytet jak Promise

Wywołanie zwrotne queueMicrotask oraz wywołanie zwrotne .then Promise korzystają z tej samej kolejki mikrozadań. Są wykonywane w kolejności, w której je zaplanowano.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Wyprzedza setTimeout

Jak wszystkie mikrozadania, wywołanie zwrotne queueMicrotask jest wykonywane przed dowolnym makrozadaniem setTimeout, nawet takim, które zaplanowano wcześniej.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Kolejność podczas opróżniania kolejki

Mikrozadania są wykonywane w kolejności FIFO. Pierwsze mikrozadanie dodane do kolejki jest wykonywane jako pierwsze podczas jej opróżniania.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Zagnieżdżanie mikrozadań

Mikrozadanie może dodać do kolejki kolejne mikrozadanie. Nowe mikrozadanie zostanie wykonane podczas tego samego opróżniania, po mikrozadaniach już znajdujących się w kolejce, ale przed dowolnym makrozadaniem.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Pełny przykład kolejności wykonywania

Połączmy kod synchroniczny, mikrozadania i makrozadanie. Prześledźmy zasadę: najpierw kod synchroniczny, następnie mikrozadania w odpowiedniej kolejności, a potem timer.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

Przeplatanie z async/await

Kontynuacja po await również jest mikrozadaniem, dlatego jest przeplatana z queueMicrotask zgodnie z kolejnością planowania.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Dlaczego warto używać queueMicrotask

Należy użyć tego mechanizmu, gdy trzeba odroczyć niewielki fragment pracy do momentu po zakończeniu bieżącego stosu wywołań, ale przed narysowaniem strony przez przeglądarkę lub uruchomieniem dowolnego timera. Pozwala to uniknąć narzutu i odmiennej semantyki rozstrzygania związanej z tworzeniem tymczasowego Promise.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Unikanie nieskończonych pętli mikrozadań

Ponieważ mikrozadania są całkowicie opróżniane przed makrozadaniami, wywołanie zwrotne, które zawsze dodaje samo siebie ponownie do kolejki, będzie bez końca blokować timery i renderowanie. Zawsze należy zapewnić warunek zakończenia.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

Pełny model mentalny

Podczas każdej iteracji pętli zdarzeń wykonywane jest makrozadanie (lub skrypt początkowy), a następnie opróżniane są wszystkie mikrozadania, po czym następuje renderowanie i kolejna iteracja. queueMicrotask pozwala precyzyjnie włączyć własny kod w fazę opróżniania kolejki.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Szybkie sprawdzenie

Kiedy względem setTimeout(fn, 0) jest wykonywane wywołanie zwrotne queueMicrotask?

Podsumowanie: queueMicrotask i kolejność wykonywania

Opanowali Państwo precyzyjne planowanie wykonania:

queueMicrotask planuje mikrozadanie bez użycia Promise.
Dzieli kolejkę mikrozadań z wywołaniami zwrotnymi Promise, zachowując kolejność FIFO.
Wszystkie mikrozadania są opróżniane przed dowolnym makrozadaniem i przed renderowaniem.
Model pętli wygląda następująco: makrozadanie, opróżnienie mikrozadań, renderowanie i powtórzenie.

Często zadawane pytania

Czy lekcja „queueMicrotask i kolejność wykonywania” jest bezpłatna?

Tak — pełny tekst „queueMicrotask i kolejność wykonywania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „queueMicrotask i kolejność wykonywania”?

Proszę precyzyjnie kontrolować kolejność wykonywania. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „queueMicrotask i kolejność wykonywania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy