Izpratne par JavaScript izpildi: setTimeout un solījumu izmantošana, lai noteiktu sinhrono un asinhrono uzvedību

Izpratne par to, kā JavaScript izpilda kodu: sinhronie un asinhronie modeļi

JavaScript ir viena pavediena valoda, kas nozīmē, ka tā vienlaikus izpilda vienu koda rindiņu. Izstrādātājiem ir ļoti svarīgi saprast, kā tas apstrādā gan sinhronus, gan asinhronus uzdevumus. Bieži vien jautājumi par šo tēmu parādās tehniskajās intervijās, tāpēc ir svarīgi rūpīgi izprast šos jēdzienus.

Kad izstrādātāji izmanto tādas funkcijas kā setTimeout vai Solījumi, izpildes plūsma sākumā var šķist nedaudz neparedzama. Tomēr, ievērojot skaidru struktūru, varat noteikt precīzu secību, kādā tiks izpildītas dažādas jūsu koda daļas. Tas ir īpaši svarīgi, strādājot ar atzvani un pasākumu rindas.

Šajā piemērā mēs noskaidrosim, kā JavaScript apstrādā tādus sinhronus uzdevumus kā console.log un asinhronās darbības, piemēram setTimeout un Solījumi. Līdz šī skaidrojuma beigām jums būs skaidrāka izpratne par to, kā JavaScript notikumu cilpa nosaka prioritāti un apstrādā uzdevumus.

Šis raksts ir izstrādāts, lai palīdzētu jums noteikt JavaScript izpildes secību, kas ir noderīga prasme intervijas jautājumu risināšanā vai asinhronā koda atkļūdošanā. Iedziļināsimies praktiskā piemērā, lai skaidri parādītu jēdzienus.

JavaScript izpildes plūsmas izpēte: sinhronais vs asinhronais kods

Programmā JavaScript ir ļoti svarīgi saprast sinhronā un asinhronā koda izpildes secību, jo īpaši, strādājot ar setTimeout un Solījumi. Galvenais jēdziens, kas jāsaprot, ir tas, kā notikumu cilpa vispirms apstrādā sinhronos uzdevumus un pēc tam pāriet uz rindā ievietoto asinhrono uzdevumu apstrādi. Norādītajā koda piemērā pirmie divi žurnāli ("A" un "F") ir sinhroni, kas nozīmē, ka tie tiek izpildīti tieši tādā secībā, kādā tie ir redzami kodā. Kad tie tiek izpildīti, skripts nekavējoties ieplāno asinhronos uzdevumus, piemēram, setTimeout vēlākai apstrādei.

Funkcija setTimeout ir izplatīts veids, kā atlikt darbības, radot izpildes plūsmas kavēšanās sajūtu. Šajā gadījumā gan setTimeout funkcijas tiek izmantotas, lai notikumu rindai pievienotu konsoles žurnālus "B" un "E". Ir svarīgi atzīmēt, ka, lai gan “E” aizkave ir 0 milisekundes, tā joprojām tiek ievietota rindā pēc pašreizējo sinhrono darbību un mikrouzdevumu pabeigšanas. Šīs smalkās atšķirības izpratne ir ļoti svarīga, lai noteiktu sarežģītākiem JavaScript uzdevumiem izpildes secību.

Pirmajā iekšā setTimeout Atzvanot, vispirms tiek izdrukāts žurnāls "B", jo tas joprojām ir daļa no sinhrono uzdevumu rindas, kurai ir prioritāte. Pēc tam šajā atzvanīšanas laikā tiek izveidots izpildīts solījums ar Apsolīt.atrisināt. Tas aktivizē mikrouzdevumu, kas nodrošina, ka žurnāls “D” notiek pēc “B”, bet pirms jebkuriem citiem uzdevumiem galvenā notikumu rindā. Šī darbība, kad solījumi tiek ievietoti mikrouzdevumu rindā, ļauj reģistrēt "D" pirms otrā setTimeout atzvanīšanas žurnāla "E". Tādējādi mikrouzdevumiem ir prioritāte pār standarta asinhronajiem uzdevumiem.

Apkopojot galīgo izpildes secību: "A" un "F" tiek reģistrēti sinhroni, kam seko "B", kas ir rindā ar pirmo setTimeout. Izpildītais solījums liek "D" reģistrēt nākamo kā mikrouzdevumu. Visbeidzot, "E" tiek reģistrēts pēdējais, jo tas ir daļa no otrā setTimeout atzvanīšana. Šī JavaScript izpildes plūsmas izpratne, kas apvieno sinhronos uzdevumus, notikumu cilpu un mikrouzdevumus, ir nenovērtējama, atbildot uz intervijas jautājumiem vai atkļūdojot asinhrono kodu reālās dzīves projektos.

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

Iedziļinieties JavaScript notikumu ciklā un uzdevumu prioritāšu noteikšanā

Galvenais JavaScript asinhronās darbības aspekts ir notikumu cilpa, kas ir atbildīgs par atzvanīšanas, solījumu un cita asinhronā koda izpildi. Šī notikumu cilpa pastāvīgi pārbauda, ​​vai zvanu steks ir tukšs, un, ja tā ir, tā apstrādā uzdevumus no atzvanīšanas rindas un mikrouzdevumu rindas. Izpratne par to, kā uzdevumi šajās rindās ir prioritāri, ir ļoti svarīgi, lai nodrošinātu, ka kods darbojas, kā paredzēts, jo īpaši apstrādājot setTimeout un sola vienlaikus.

Mikrouzdevumu rindai ir prioritāte pār atzvanīšanas rindu. Uzdevumi, piemēram sola rezolūcijas tiek ievietoti mikrouzdevumu rindā, kas nozīmē, ka tie tiek izpildīti pirms jebkādiem aizkavētiem uzdevumiem no atzvanīšanas rindas, pat ja setTimeout aizkave ir nulle. Tāpēc koda piemērā žurnāls "D" no solījuma tiek izpildīts pirms žurnāla "E" no otrā setTimeout. Ir ļoti svarīgi, lai izstrādātāji to saprastu, rakstot kodu, kas sajauc asinhronas darbības, lai izvairītos no neparedzētas darbības.

Reālās pasaules lietojumprogrammās asinhronās darbības, piemēram, API izsaukumi vai taimeri, bieži mijiedarbojas ar sinhrono kodu. Zinot, kā darbojas notikumu cilpa, atzvanīšanas rinda un mikrouzdevumu rinda, izstrādātāji var labāk paredzēt sava koda iznākumu. Tas ir īpaši svarīgi, optimizējot veiktspēju vai atkļūdojot sarežģītus skriptus, kur abi asinhronās operācijas un sinhronais kods bieži mijiedarbojas.