JavaScript-suorituksen ymmärtäminen: setTimeout- ja lupausten käyttäminen synkronisen vs. asynkronisen käyttäytymisen määrittämiseen

Miten JavaScript suorittaa koodin: synkroniset ja asynkroniset mallit

JavaScript on yksisäikeinen kieli, mikä tarkoittaa, että se suorittaa yhden koodirivin kerrallaan. Sen ymmärtäminen, kuinka se käsittelee sekä synkronisia että asynkronisia tehtäviä, on erittäin tärkeää kehittäjille. Usein tätä aihetta koskevia kysymyksiä esiintyy teknisissä haastatteluissa, minkä vuoksi on tärkeää ymmärtää nämä käsitteet perusteellisesti.

Kun kehittäjät käyttävät toimintoja, kuten setTimeout tai Lupaukset, suorituskulku saattaa aluksi tuntua hieman arvaamattomalta. Noudattamalla selkeää rakennetta voit kuitenkin määrittää tarkan järjestyksen, jossa koodisi eri osat suoritetaan. Tämä on erityisen tärkeää käsiteltäessä takaisinsoittoja ja tapahtumajonot.

Tässä esimerkissä erittelemme kuinka JavaScript käsittelee synkronisia tehtäviä, kuten console.log ja asynkroniset toiminnot, kuten setTimeout ja Lupaukset. Tämän selityksen loppuun mennessä sinulla on selkeämpi käsitys siitä, kuinka JavaScriptin tapahtumasilmukka priorisoi ja käsittelee tehtäviä.

Tämä artikkeli on suunniteltu auttamaan sinua määrittämään JavaScriptin suoritusjärjestys, joka on hyödyllinen taito haastattelukysymyksissä tai asynkronisen koodin virheenkorjauksessa. Sukellaan käytännön esimerkkiin, jotta käsitteet näkyvät selkeästi.

JavaScript-suoritusvirran tutkiminen: Synkroninen vs. asynkroninen koodi

JavaScriptissä synkronisen ja asynkronisen koodin suoritusjärjestyksen ymmärtäminen on välttämätöntä, etenkin kun käsitellään setTimeout ja Lupaukset. Keskeinen käsite on se, kuinka tapahtumasilmukka käsittelee ensin synkronisia tehtäviä ja sitten siirtyy käsittelemään jonossa olevia asynkronisia tehtäviä. Annetussa esimerkkikoodissa kaksi ensimmäistä lokia ("A" ja "F") ovat synkronisia, mikä tarkoittaa, että ne suoritetaan täsmälleen siinä järjestyksessä, jossa ne näkyvät koodissa. Heti kun ne suoritetaan, komentosarja ajoittaa välittömästi asynkroniset tehtävät, kuten setTimeout myöhempää käsittelyä varten.

SetTimeout-toiminto on yleinen tapa lykätä toimintoja, mikä luo viiveen tunteen suorituskulussa. Tässä tapauksessa molemmat setTimeout funktioita käytetään lisäämään konsolin lokit "B" ja "E" tapahtumajonoon. On tärkeää huomata, että vaikka "E":n viive on 0 millisekuntia, se joutuu silti jonoon nykyisten synkronisten toimintojen ja mikrotehtävien suorittamisen jälkeen. Tämän hienovaraisen eron ymmärtäminen on ratkaisevan tärkeää määritettäessä suoritusjärjestystä monimutkaisemmissa JavaScript-tehtävissä.

Ensimmäisen sisällä setTimeout takaisinsoitto, loki "B" tulostetaan ensin, koska se on edelleen osa synkronista tehtäväjonoa, joka on etusijalla. Sitten takaisinsoiton aikana luodaan ratkaistu lupaus Lupaa.resolve. Tämä käynnistää mikrotehtävän, joka varmistaa, että loki "D" tapahtuu "B":n jälkeen, mutta ennen muita päätapahtumajonon tehtäviä. Tämä mikrotehtäväjonoon sijoittuvien lupausten käyttäytyminen mahdollistaa "D":n kirjaamisen ennen kuin toinen setTimeout-soittoloki kirjaa "E". Näin ollen mikrotehtävät ovat etusijalla tavallisiin asynkronisiin tehtäviin verrattuna.

Yhteenvetona lopullisesta suoritusjärjestyksestä: "A" ja "F" kirjataan synkronisesti, ja sen jälkeen "B", joka on jonossa ensimmäisen setTimeoutin mukaan. Ratkaistu lupaus aiheuttaa sen, että "D" kirjataan seuraavaksi mikrotehtävänä. Lopuksi "E" kirjataan viimeisenä, koska se on osa toista setTimeout takaisinsoitto. Tämä JavaScriptin suorituskulun ymmärtäminen, joka yhdistää synkroniset tehtävät, tapahtumasilmukan ja mikrotehtävät, on korvaamaton, kun vastataan haastattelukysymyksiin tai korjataan asynkronista koodia tosielämän projekteissa.

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

Sukella syvälle JavaScriptin tapahtumasilmukkaan ja tehtävien priorisointiin

JavaScriptin asynkronisen toiminnan avaintekijä on tapahtumasilmukka, joka vastaa takaisinkutsujen, lupausten ja muun asynkronisen koodin suorittamisesta. Tämä tapahtumasilmukka tarkistaa jatkuvasti, onko puhelupino tyhjä, ja jos on, se käsittelee tehtävät takaisinsoittojonosta ja mikrotehtäväjonosta. On tärkeää ymmärtää, kuinka tehtävät priorisoidaan näissä jonoissa, jotta varmistetaan, että koodi käyttäytyy odotetulla tavalla, erityisesti käsiteltäessä setTimeout ja lupauksia samanaikaisesti.

Mikrotehtäväjono on etusijalla takaisinsoittojonoon nähden. Tehtävät kuten lupaa päätöksiä sijoitetaan mikrotehtäväjonoon, mikä tarkoittaa, että ne suoritetaan ennen viivästyneitä tehtäviä takaisinsoittojonosta, vaikka setTimeoutin viive olisi nolla. Tästä syystä koodiesimerkissä lupauksen loki "D" suoritetaan ennen lokia "E" toisesta setTimeout:sta. On elintärkeää, että kehittäjät ymmärtävät tämän kirjoittaessaan koodia, joka sekoittaa asynkronisia toimintoja odottamattoman toiminnan välttämiseksi.

Tosimaailman sovelluksissa asynkroniset toiminnot, kuten API-kutsut tai ajastimet, ovat usein vuorovaikutuksessa synkronisen koodin kanssa. Tietäen, miten tapahtumasilmukka, takaisinsoittojono ja mikrotehtäväjono toimivat, kehittäjät voivat paremmin ennustaa koodinsa lopputuloksen. Tämä on erityisen tärkeää optimoitaessa suorituskykyä tai testattaessa monimutkaisia ​​skriptejä, joissa molemmat asynkroniset toiminnot ja synkroninen koodi ovat vuorovaikutuksessa usein.