Zrozumienie wykonywania JavaScript: użycie setTimeout i obietnic do określenia zachowania synchronicznego i asynchronicznego

Zrozumienie sposobu wykonywania kodu JavaScript: wzorce synchroniczne i asynchroniczne

JavaScript jest językiem jednowątkowym, co oznacza, że ​​wykonuje jednocześnie jedną linię kodu. Zrozumienie, w jaki sposób obsługuje zarówno zadania synchroniczne, jak i asynchroniczne, ma kluczowe znaczenie dla programistów. Często w rozmowach technicznych pojawiają się pytania na ten temat, dlatego ważne jest dokładne zrozumienie tych pojęć.

Kiedy programiści używają funkcji takich jak ustaw limit czasu Lub Obietnice, przebieg wykonywania może początkowo wydawać się nieco nieprzewidywalny. Jednakże, stosując przejrzystą strukturę, możesz określić dokładną kolejność wykonywania różnych części kodu. Jest to szczególnie ważne, gdy mamy do czynienia z oddzwonienia I kolejki zdarzeń.

W tym przykładzie omówimy, jak JavaScript obsługuje zadania synchroniczne, takie jak konsola.log i operacje asynchroniczne, takie jak ustaw limit czasu I Obietnice. Pod koniec tego wyjaśnienia będziesz lepiej rozumieć, w jaki sposób pętla zdarzeń JavaScript ustala priorytety i przetwarza zadania.

Ten artykuł ma na celu pomóc Ci określić kolejność wykonywania w JavaScript, co jest przydatną umiejętnością przy rozwiązywaniu pytań na rozmowie kwalifikacyjnej lub debugowaniu kodu asynchronicznego. Przejdźmy do praktycznego przykładu, aby jasno zademonstrować koncepcje.

Odkrywanie przepływu wykonywania JavaScript: kod synchroniczny i asynchroniczny

W JavaScript zrozumienie kolejności wykonywania kodu synchronicznego i asynchronicznego jest niezbędne, szczególnie w przypadku kodów ustaw limit czasu I Obietnice. Kluczową koncepcją do zrozumienia jest to, jak pętla zdarzeń najpierw przetwarza zadania synchroniczne, a następnie przechodzi do obsługi kolejkowanych zadań asynchronicznych. W podanym przykładowym kodzie pierwsze dwa dzienniki („A” i „F”) są synchroniczne, co oznacza, że ​​są wykonywane dokładnie w takiej kolejności, w jakiej pojawiają się w kodzie. W momencie ich wykonania skrypt natychmiast planuje zadania asynchroniczne, takie jak setTimeout, do późniejszego przetworzenia.

Funkcja setTimeout jest powszechnym sposobem odroczenia operacji, tworząc wrażenie opóźnienia w przebiegu wykonywania. W tym przypadku jedno i drugie ustaw limit czasu funkcje służą do dodawania dzienników konsoli „B” i „E” do kolejki zdarzeń. Należy zauważyć, że chociaż „E” ma opóźnienie 0 milisekund, nadal trafia do kolejki po zakończeniu bieżących operacji synchronicznych i mikrozadań. Zrozumienie tego subtelnego rozróżnienia ma kluczowe znaczenie przy ustalaniu kolejności wykonywania bardziej złożonych zadań JavaScript.

Wewnątrz pierwszego ustaw limit czasu wywołania zwrotnego, dziennik „B” jest drukowany jako pierwszy, ponieważ nadal stanowi część synchronicznej kolejki zadań, która ma priorytet. Następnie w ramach tego wywołania zwrotnego tworzona jest rozwiązana obietnica Obiecaj. Rozwiąż. To wyzwala mikrozadanie, które gwarantuje, że dziennik „D” wystąpi po „B”, ale przed innymi zadaniami w kolejce głównych zdarzeń. To zachowanie Promises umieszczanych w kolejce mikrozadań pozwala na zarejestrowanie „D” przed drugim wywołaniem zwrotnym setTimeout zarejestrowanym „E”. Zatem mikrozadania mają pierwszeństwo przed standardowymi zadaniami asynchronicznymi.

Podsumowując ostateczną kolejność wykonania: „A” i „F” są rejestrowane synchronicznie, po nich następuje „B”, które jest umieszczane w kolejce przez pierwszy setTimeout. Rozwiązana obietnica powoduje, że „D” jest następnie rejestrowane jako mikrozadanie. Wreszcie „E” jest rejestrowane jako ostatnie, ponieważ jest częścią sekundy ustaw limit czasu oddzwonienie. To zrozumienie przepływu wykonania JavaScript, łączenia zadań synchronicznych, pętli zdarzeń i mikrozadań, jest nieocenione podczas odpowiadania na pytania podczas rozmowy kwalifikacyjnej lub debugowania kodu asynchronicznego w rzeczywistych projektach.

console.log("A");
setTimeout(() => {
    console.log("B");
    Promise.resolve("C").then(() => console.log("D"));
}, 1000);
setTimeout(() => console.log("E"), 0);
console.log("F");

console.log("Start");
setTimeout(() => {
    console.log("Middle");
}, 500);
Promise.resolve().then(() => {
    console.log("Promise 1");
});
console.log("End");

Zagłęb się w pętlę zdarzeń JavaScript i ustalanie priorytetów zadań

Kluczowym aspektem asynchronicznego zachowania JavaScriptu jest pętla zdarzeń, który jest odpowiedzialny za obsługę wykonywania wywołań zwrotnych, obietnic i innego kodu asynchronicznego. Ta pętla zdarzeń stale sprawdza, czy stos wywołań jest pusty, a jeśli tak, przetwarza zadania z kolejki wywołań zwrotnych i kolejki mikrozadań. Zrozumienie sposobu ustalania priorytetów zadań w tych kolejkach ma kluczowe znaczenie dla zapewnienia, że ​​kod działa zgodnie z oczekiwaniami, szczególnie podczas obsługi ustaw limit czasu i obiecuje jednocześnie.

Kolejka mikrozadań ma pierwszeństwo przed kolejką wywołań zwrotnych. Zadania typu obiecać postanowienia są umieszczane w kolejce mikrozadań, co oznacza, że ​​są wykonywane przed wszelkimi opóźnionymi zadaniami z kolejki wywołań zwrotnych, nawet jeśli setTimeout ma opóźnienie równe zero. Dlatego w przykładzie kodu dziennik „D” z obietnicy jest wykonywany przed dziennikiem „E” z drugiego setTimeout. Programiści powinni to zrozumieć podczas pisania kodu, który łączy operacje asynchroniczne, aby uniknąć nieoczekiwanego zachowania.

W rzeczywistych aplikacjach operacje asynchroniczne, takie jak wywołania API lub liczniki czasu, często wchodzą w interakcję z kodem synchronicznym. Wiedząc, jak działają pętla zdarzeń, kolejka wywołań zwrotnych i kolejka mikrozadań, programiści mogą lepiej przewidzieć wynik swojego kodu. Jest to szczególnie ważne podczas optymalizacji wydajności lub debugowania złożonych skryptów, w przypadku których oba operacje asynchroniczne i kod synchroniczny często wchodzą w interakcję.