Model izvajanja JavaScripta je niansiran in ga je enostavno napačno razumeti. Učenje o zanki dogodkov v njenem jedru lahko pomaga.

JavaScript je jezik z eno nitjo, zgrajen za obravnavanje nalog eno za drugo. Vendar pa zanka dogodkov omogoča, da JavaScript asinhrono obravnava dogodke in povratne klice s posnemanjem sistemov za sočasno programiranje. To zagotavlja delovanje vaših aplikacij JavaScript.

Kaj je zanka dogodkov JavaScript?

Dogodkovna zanka JavaScripta je mehanizem, ki deluje v ozadju vsake aplikacije JavaScript. Omogoča JavaScriptu, da obravnava naloge v zaporedju, ne da bi blokiral njegovo glavno izvajalno nit. To se imenuje asinhrono programiranje.

Dogodkovna zanka ohranja čakalno vrsto opravil, ki jih je treba izvajati, in ta opravila dovaja na desno spletni API za izvedbo eno za drugo. JavaScript spremlja te naloge in jih obravnava glede na stopnjo zahtevnosti naloge.

Razumeti potrebo po zanki dogodkov JavaScript in asinhronem programiranju. Razumeti morate, kateri problem v bistvu rešuje.

instagram viewer

Vzemite na primer to kodo:

functionlongRunningFunction() {
// This function does something that takes a long time to execute.
for (var i = 0; i < 100000; i++) {
console.log("Hello")
 }
}
functionshortRunningFunction(a) {
return a * 2 ;
}


functionmain() {
var startTime = Date.now();
 longRunningFunction();

var endTime = Date.now();


// Prints the amount of time it took to execute functions
console.log(shortRunningFunction(2));
console.log("Time taken: " + (endTime - startTime) + " milliseconds");
}
main();

Ta koda najprej definira imenovano funkcijo longRunningFunction(). Ta funkcija bo opravila nekakšno kompleksno in dolgotrajno nalogo. V tem primeru izvaja a za zanka, ki se ponovi več kot 100.000-krat. To pomeni da console.log("Pozdravljeni") teče 100.000-krat.

Odvisno od hitrosti računalnika lahko to traja dolgo in blokira shortRunningFunction() od takojšnje izvedbe do dokončanja prejšnje funkcije.

Za kontekst je tukaj primerjava časa, potrebnega za izvajanje obeh funkcij:

In potem singel shortRunningFunction():

Razlika med 2351-milisekundno operacijo in 0-milisekundno operacijo je očitna, ko želite zgraditi zmogljivo aplikacijo.

Kako zanka dogodkov pomaga pri delovanju aplikacije

Dogodkovna zanka ima različne stopnje in dele, ki prispevajo k delovanju sistema.

Sklad klicev

Sklad klicev JavaScript je bistven za to, kako JavaScript obravnava klice funkcij in dogodkov iz vaše aplikacije. Koda JavaScript se prevaja od zgoraj navzdol. Vendar bo Node.js ob branju kode dodelil klice funkcij od spodaj navzgor. Med branjem potiska definirane funkcije kot okvirje eno za drugo v sklad klicev.

Klicni sklad je odgovoren za vzdrževanje konteksta izvajanja in pravilnega vrstnega reda funkcij. To počne tako, da deluje kot sklad zadnji-v-prvi-ven (LIFO).

To pomeni, da bo zadnji funkcijski okvir, ki ga vaš program potisne na sklad klicev, prvi izskočil iz sklada in se zagnal. To bo zagotovilo, da JavaScript ohranja pravi vrstni red izvajanja funkcij.

JavaScript bo vsak okvir odstranil iz sklada, dokler ni prazen, kar pomeni, da so se vse funkcije končale.

Spletni API Libuv

Jedro asinhronih programov JavaScript je libuv. Knjižnica libuv je napisana v programskem jeziku C, ki lahko komunicira z operacijskim sistemom API-ji nizke ravni. Knjižnica bo zagotovila več API-jev, ki omogočajo, da se koda JavaScript izvaja vzporedno z drugimi Koda. API-ji za ustvarjanje niti, API za komunikacijo med nitmi in API za upravljanje sinhronizacije niti.

Na primer, ko uporabljate setTimeout v Node.js za zaustavitev izvajanja. Časovnik je nastavljen prek libuv, ki upravlja zanko dogodkov za izvedbo funkcije povratnega klica, ko mine navedena zakasnitev.

Podobno, ko izvajate omrežne operacije asinhrono, libuv obravnava te operacije v neblokirni način, ki zagotavlja, da lahko druge naloge nadaljujejo z obdelavo, ne da bi čakali na vhodno/izhodno (I/O) operacijo konec.

Povratni klic in čakalna vrsta dogodkov

Čakalna vrsta povratnih klicev in dogodkov je mesto, kjer funkcije povratnih klicev čakajo na izvedbo. Ko se asinhrona operacija zaključi iz libuv, se njena ustrezna funkcija povratnega klica doda v to čakalno vrsto.

Takole gre zaporedje:

  1. JavaScript premakne asinhrone naloge v libuv, da jih obravnava, in takoj nadaljuje z obravnavanjem naslednje naloge.
  2. Ko se asinhrono opravilo konča, JavaScript doda svojo funkcijo povratnega klica v čakalno vrsto povratnega klica.
  3. JavaScript še naprej izvaja druge naloge v skladu klicev, dokler ni opravljen z vsem v trenutnem vrstnem redu.
  4. Ko je sklad klicev prazen, JavaScript pogleda čakalno vrsto povratnih klicev.
  5. Če je v čakalni vrsti povratni klic, potisne prvega v sklad klicev in ga izvede.

Na ta način asinhrona opravila ne blokirajo glavne niti, čakalna vrsta povratnih klicev pa zagotavlja, da se njihovi ustrezni povratni klici izvajajo v vrstnem redu, kot so jih dokončali.

Cikel zanke dogodkov

Zanka dogodkov ima tudi nekaj, kar se imenuje čakalna vrsta mikroopravil. Ta posebna čakalna vrsta v zanki dogodkov vsebuje mikroopravila, ki so načrtovana za izvedbo takoj, ko se zaključi trenutno opravilo v skladu klicev. Ta izvedba se zgodi pred naslednjim upodabljanjem ali ponovitvijo zanke dogodkov. Mikroopravila so opravila visoke prioritete s prednostjo pred običajnimi opravili v zanki dogodkov.

Mikroopravilo se običajno ustvari pri delu z obljubami. Kadarkoli se obljuba razreši ali zavrne, je ustrezna .potem() oz .catch() povratnih klicev se pridruži čakalni vrsti mikroopravil. To čakalno vrsto lahko uporabite za upravljanje nalog, ki jih je treba takoj izvesti po trenutni operaciji, kot je posodabljanje uporabniškega vmesnika vaše aplikacije ali obravnavanje sprememb stanja.

Na primer spletna aplikacija, ki izvaja pridobivanje podatkov in posodablja uporabniški vmesnik na podlagi pridobljenih podatkov. Uporabniki lahko sprožijo pridobivanje podatkov tako, da večkrat kliknejo gumb. Vsak klik gumba sproži asinhrono operacijo pridobivanja podatkov.

Brez mikroopravil bi zanka dogodkov za to nalogo delovala na naslednji način:

  1. Uporabnik večkrat klikne gumb.
  2. Vsak klik gumba sproži operacijo asinhronega pridobivanja podatkov.
  3. Ko so operacije pridobivanja podatkov končane, JavaScript doda njihove ustrezne povratne klice v običajno čakalno vrsto opravil.
  4. Dogodkovna zanka začne obdelovati opravila v običajni čakalni vrsti opravil.
  5. Posodobitev uporabniškega vmesnika na podlagi rezultatov pridobivanja podatkov se izvede takoj, ko običajna opravila to dopuščajo.

Vendar pa pri mikroopravilih zanka dogodkov deluje drugače:

  1. Uporabnik večkrat klikne gumb in sproži operacijo asinhronega pridobivanja podatkov.
  2. Ko so operacije pridobivanja podatkov končane, zanka dogodkov doda njihove ustrezne povratne klice v čakalno vrsto mikroopravil.
  3. Dogodkovna zanka začne obdelovati opravila v čakalni vrsti mikroopravil takoj po zaključku trenutnega opravila (klik na gumb).
  4. Posodobitev uporabniškega vmesnika na podlagi rezultatov pridobivanja podatkov se izvede pred naslednjim rednim opravilom, kar zagotavlja bolj odzivno uporabniško izkušnjo.

Tukaj je primer kode:

const fetchData = () => {
returnnewPromise(resolve => {
 setTimeout(() => resolve('Data from fetch'), 2000);
 });
};
document.getElementById('fetch-button').addEventListener('click', () => {
 fetchData().then(data => {
// This UI update will run before the next rendering cycle
 updateUI(data);
 });
});

V tem primeru vsak klik na gumb "Pridobi" pokliče fetchData(). Vsaka operacija pridobivanja podatkov je razporejena kot mikroopravilo. Na podlagi pridobljenih podatkov se posodobitev uporabniškega vmesnika izvede takoj po zaključku vsake operacije pridobivanja, pred vsemi drugimi opravili upodabljanja ali zanke dogodkov.

To zagotavlja, da uporabniki vidijo posodobljene podatke brez kakršnih koli zamud zaradi drugih opravil v zanki dogodkov.

Uporaba mikroopravil v scenarijih, kot je ta, lahko prepreči napake v uporabniškem vmesniku in zagotovi hitrejše in bolj gladke interakcije v vaši aplikaciji.

Posledice zanke dogodkov za spletni razvoj

Razumevanje zanke dogodkov in uporabe njenih funkcij je bistvenega pomena za gradnjo zmogljivih in odzivnih aplikacij. Dogodkovna zanka zagotavlja asinhrone in vzporedne zmogljivosti, tako da lahko učinkovito obravnavate zapletene naloge v svoji aplikaciji, ne da bi pri tem ogrozili uporabniško izkušnjo.

Node.js ponuja vse, kar potrebujete, vključno s spletnimi delavci za doseganje nadaljnje vzporednosti zunaj glavne niti JavaScripta.