Razumevanje izvajanja JavaScript: Uporaba setTimeout in Promises za določanje sinhronega v primerjavi z asinhronim vedenjem

Razumevanje, kako JavaScript izvaja kodo: sinhroni in asinhroni vzorci

JavaScript je jezik z eno nitjo, kar pomeni, da izvaja eno vrstico kode naenkrat. Za razvijalce je ključnega pomena razumevanje, kako obravnava sinhrone in asinhrone naloge. V tehničnih intervjujih se pogosto pojavijo vprašanja o tej temi, zato je pomembno, da te koncepte temeljito razumete.

Ko razvijalci uporabljajo funkcije, kot je setTimeout oz Obljube, se lahko potek izvajanja sprva zdi nekoliko nepredvidljiv. Če pa sledite jasni strukturi, lahko določite natančen vrstni red, v katerem se bodo izvajali različni deli vaše kode. To je še posebej pomembno pri obravnavanju povratni klici in čakalne vrste dogodkov.

V tem primeru bomo razčlenili, kako JavaScript obravnava sinhrone naloge, kot je console.log in asinhrone operacije, kot je setTimeout in Obljube. Ob koncu te razlage boste jasneje razumeli, kako zanka dogodkov JavaScripta daje prednost in obdeluje naloge.

Ta članek je zasnovan tako, da vam pomaga določiti vrstni red izvajanja v JavaScriptu, kar je uporabna veščina pri reševanju vprašanj na razgovoru ali odpravljanju napak v asinhroni kodi. Poglobimo se v praktični primer, da jasno prikažemo koncepte.

Raziskovanje toka izvajanja JavaScript: sinhrona proti asinhroni kodi

V JavaScriptu je razumevanje vrstnega reda izvajanja sinhrone in asinhrone kode bistvenega pomena, zlasti pri obravnavi setTimeout in Obljube. Ključni koncept, ki ga je treba razumeti, je, kako zanka dogodkov najprej obdela sinhrona opravila in nato nadaljuje z obravnavanjem asinhronih opravil v čakalni vrsti. V ponujeni vzorčni kodi sta prva dva dnevnika (»A« in »F«) sinhrona, kar pomeni, da se izvajata v točno takšnem vrstnem redu, kot sta prikazana v kodi. V trenutku, ko se izvedejo, skript takoj načrtuje asinhrone naloge, kot je setTimeout, za kasnejšo obdelavo.

Funkcija setTimeout je običajen način za odlog operacij, kar ustvarja občutek zakasnitve v toku izvajanja. V tem primeru oboje setTimeout funkcije se uporabljajo za dodajanje dnevnikov konzole "B" in "E" v čakalno vrsto dogodkov. Pomembno je omeniti, da čeprav ima "E" zakasnitev 0 milisekund, se še vedno postavi v čakalno vrsto po zaključku trenutnih sinhronih operacij in mikroopravil. Razumevanje te subtilne razlike je ključnega pomena pri določanju vrstnega reda izvajanja za bolj zapletene naloge JavaScript.

Znotraj prvega setTimeout povratni klic, se najprej natisne dnevnik "B", saj je še vedno del čakalne vrste sinhronih opravil, ki ima prednost. Nato se znotraj tega povratnega klica ustvari razrešena obljuba z Obljuba.rešiti. To sproži mikroopravilo, ki zagotovi, da se dnevnik »D« pojavi za »B«, vendar pred vsemi drugimi opravili v čakalni vrsti glavnih dogodkov. To vedenje obljub, ki so postavljene v čakalno vrsto mikroopravil, je tisto, kar omogoča, da se "D" zabeleži, preden drugi povratni klic setTimeout zabeleži "E". Tako imajo mikroopravila prednost pred standardnimi asinhronimi opravili.

Če povzamemo končni vrstni red izvajanja: "A" in "F" se zabeležita sinhrono, sledi "B", ki je postavljen v čakalno vrsto s prvim setTimeoutom. Razrešena obljuba povzroči, da se "D" naslednjič zabeleži kot mikroopravilo. Nazadnje je "E" zabeležen zadnji, ker je del drugega setTimeout povratni klic. To razumevanje izvedbenega toka JavaScripta, ki združuje sinhrone naloge, zanko dogodkov in mikroopravila, je neprecenljivo pri odgovarjanju na vprašanja za intervju ali odpravljanju napak v asinhroni kodi v realnih projektih.

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");

Poglobite se v zanko dogodkov in prednostno razvrščanje opravil v JavaScriptu

Ključni vidik asinhronega obnašanja JavaScripta je zanka dogodkov, ki je odgovoren za upravljanje izvajanja povratnih klicev, obljub in druge asinhrone kode. Ta zanka dogodkov nenehno preverja, ali je sklad klicev prazen, in če je, obdela naloge iz čakalne vrste povratnih klicev in čakalne vrste mikroopravil. Razumevanje, kako so opravila prednostno razvrščena v teh čakalnih vrstah, je ključnega pomena za zagotavljanje, da se koda obnaša po pričakovanjih, zlasti pri ravnanju setTimeout in obljublja hkrati.

Čakalna vrsta mikroopravil ima prednost pred čakalno vrsto povratnega klica. Naloge, kot so obljube sklepov se postavijo v čakalno vrsto mikroopravil, kar pomeni, da se izvedejo pred vsemi zakasnjenimi opravili iz čakalne vrste za povratni klic, tudi če ima setTimeout zakasnitev nič. Zato se v primeru kode dnevnik "D" iz obljube izvede pred dnevnikom "E" iz drugega setTimeouta. Bistvenega pomena je, da razvijalci to razumejo, ko pišejo kodo, ki meša asinhrone operacije, da se izognejo nepričakovanemu vedenju.

V aplikacijah iz resničnega sveta asinhrone operacije, kot so klici API-ja ali časovniki, pogosto komunicirajo s sinhrono kodo. Če poznajo, kako delujejo zanka dogodkov, čakalna vrsta povratnega klica in čakalna vrsta mikroopravil, lahko razvijalci bolje predvidijo rezultat svoje kode. To je še posebej pomembno pri optimizaciji delovanja ali odpravljanju napak v zapletenih skriptih, kjer je oboje asinhrone operacije in sinhrona koda pogosto sodelujeta.