JavaScripti käivitamise mõistmine: setTimeouti ja lubaduste kasutamine sünkroonse ja asünkroonse käitumise määramiseks

JavaScripti koodi käivitamise mõistmine: sünkroonsed ja asünkroonsed mustrid

JavaScript on ühe lõimega keel, mis tähendab, et see käivitab korraga ühe koodirea. Arendajatele on ülioluline mõista, kuidas see nii sünkroonseid kui ka asünkroonseid ülesandeid käsitleb. Sageli esitatakse tehnilistes intervjuudes küsimusi selle teema kohta, mistõttu on oluline neid mõisteid põhjalikult mõista.

Kui arendajad kasutavad selliseid funktsioone nagu setTimeout või Lubadused, võib täitmise voog alguses tunduda pisut ettearvamatu. Kuid järgides selget struktuuri, saate määrata täpse järjestuse, milles teie koodi erinevad osad käivituvad. See on eriti oluline tegelemisel tagasihelistamised ja ürituste järjekorrad.

Selles näites kirjeldame, kuidas JavaScript käsitleb selliseid sünkroonseid ülesandeid nagu console.log ja asünkroonsed toimingud nagu setTimeout ja Lubadused. Selle selgituse lõpuks on teil selgem arusaam sellest, kuidas JavaScripti sündmusesilmus ülesandeid prioritiseerib ja töötleb.

Selle artikli eesmärk on aidata teil määrata JavaScripti täitmise järjekorda. See on kasulik oskus intervjuu küsimuste lahendamisel või asünkroonse koodi silumisel. Sukeldume praktilisse näidesse, et mõisteid selgelt näidata.

JavaScripti täitmisvoo uurimine: sünkroonne vs asünkroonne kood

JavaScriptis on sünkroonse ja asünkroonse koodi täitmisjärjekorra mõistmine oluline, eriti kui tegemist on setTimeout ja Lubadused. Peamine mõiste on see, kuidas sündmusesilmus esmalt sünkroonseid ülesandeid töötleb ja seejärel järjekorda pandud asünkroonseid ülesandeid käsitleb. Esitatud näidiskoodis on kaks esimest logi ("A" ja "F") sünkroonsed, mis tähendab, et neid täidetakse täpselt koodis kuvatavas järjekorras. Nende käivitamise hetkel ajastab skript kohe asünkroonsed toimingud, nagu setTimeout, hilisemaks töötlemiseks.

Funktsioon setTimeout on levinud viis toimingute edasilükkamiseks, luues täitmisvoos viivituse tunde. Sel juhul mõlemad setTimeout funktsioone kasutatakse konsoolilogide "B" ja "E" lisamiseks sündmuste järjekorda. Oluline on märkida, et kuigi "E" viivitus on 0 millisekundit, satub see ikkagi järjekorda pärast praeguste sünkroonsete toimingute ja mikroülesannete lõpetamist. Selle peene eristuse mõistmine on keerukamate JavaScripti ülesannete täitmise järjekorra määramisel ülioluline.

Esimese sees setTimeout tagasihelistamisel prinditakse logi "B" esmalt, kuna see on endiselt osa sünkroonülesannete järjekorrast, millel on prioriteet. Seejärel luuakse selle tagasihelistamise ajal täidetud lubadus Luba.lahendada. See käivitab mikrotegumi, mis tagab, et logi "D" toimub pärast "B", kuid enne mis tahes muid põhisündmuste järjekorras olevaid toiminguid. See lubaduste mikroülesannete järjekorda paigutamise käitumine võimaldab "D" logida enne, kui teine ​​setTimeout tagasihelistamislogi "E". Seega eelistavad mikroülesanded tavapäraste asünkroonsete ülesannete ees.

Lõpliku täitmisjärjestuse kokkuvõtteks: "A" ja "F" logitakse sünkroonselt, millele järgneb "B", mis seab järjekorda esimene setTimeout. Lahendatud lubaduse tõttu logitakse järgmisena mikroülesandena "D". Lõpuks logitakse "E" viimasena, kuna see on osa teisest setTimeout tagasihelistamine. Selline arusaam JavaScripti täitmisvoost, mis ühendab sünkroonseid ülesandeid, sündmuste tsüklit ja mikrotegureid, on hindamatu väärtusega intervjuu küsimustele vastamisel või asünkroonse koodi silumisel reaalprojektides.

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

Sukelduge põhjalikult JavaScripti sündmusteahelasse ja ülesannete prioriseerimisse

JavaScripti asünkroonse käitumise põhiaspektiks on sündmuse silmus, mis vastutab tagasihelistuste, lubaduste ja muu asünkroonse koodi täitmise eest. See sündmusesilmus kontrollib pidevalt, kas kõnepinn on tühi, ja kui on, siis töötleb tagasihelistamisjärjekorra ja mikroülesannete järjekorra ülesandeid. Et kood käituks ootuspäraselt, on oluline mõista, kuidas ülesanded nendes järjekordades prioriseeritakse, eriti käsitsemisel. setTimeout ja lubadusi korraga.

Mikroülesannete järjekord on tagasihelistamisjärjekorra ees ülimuslik. Ülesanded nagu lubadusi paigutatakse mikrotegumite järjekorda, mis tähendab, et need käivitatakse enne tagasihelistamisjärjekorra hilinenud toiminguid, isegi kui setTimeouti viivitus on null. Sellepärast käivitatakse koodinäites lubaduse logi "D" enne logi "E" teisest setTimeout'ist. Arendajatel on oluline seda mõista, kui kirjutavad koodi, mis segab ootamatu käitumise vältimiseks asünkroonseid toiminguid.

Reaalmaailma rakendustes suhtlevad asünkroonsed toimingud, nagu API-kõned või taimerid, sageli sünkroonse koodiga. Teades, kuidas sündmusesilmus, tagasihelistamise järjekord ja mikrotegumite järjekord töötavad, saavad arendajad oma koodi tulemust paremini ennustada. See on eriti oluline jõudluse optimeerimisel või keeruliste skriptide silumisel, kus mõlemad asünkroonsed toimingud ja sünkroonkood suhtlevad sageli.