Etusivu » Blogi » Tapahtumakierto (event loop) JavaScriptissa

Olli Perikanta

Julkaistu 6.1.2024

Tapahtumakierto (event loop) JavaScriptissa

JavaScriptissa tapahtumakierto (event loop) on mekanismi, joka jatkuvasti tarkistaa viestijonoa tapahtumille ja suorittaa ne peräkkäin. Se varmistaa, että koodin suoritus ei jää jumiin aikaa vieviin tehtäviin.

Tässä yksinkertaistettuna tapahtumakierto:

1. Kutsupino (Call Stack): JavaScript ylläpitää kutsupinoa, joka pitää kirjaa parhaillaan suoritettavasta funktiosta tai koodilohkosta.
2. Takaisinkutsujono (Callback Queue): Asynkroniset tehtävät, kuten käyttäjän syötteet, ajastimet tai verkkopyynnöt hoidetaan selaimessa. Kun nämä tehtävät ovat valmiita, ne sijoitetaan takaisinkutsujonoon.
3. Tapahtumakierto (Event Loop): Tapahtumakierto tarkistaa jatkuvasti kutsupinoa ja takaisinkutsujonoa. Jos kutsupino on tyhjä, se ottaa ensimmäisen takaisinkutsun jonosta ja asettaa sen kutsupinoon suoritettavaksi.
4. Suoritus: Takaisinkutsu suoritetaan ja prosessi toistuu.

Tässä yksinkertainen esimerkki JavaScript-koodista, joka havainnollistaa tapahtumakiertoa asynkronisen tapahtuman avulla. Koodissa on (setTimeout) funktio, joka asettaa aikakatkaisun ja sitten tulostaa viestin, kun aikakatkaisu päättyy. Samalla voit nähdä, miten tapahtumakierto sallii muiden tehtävien suorittamisen aikakatkaisun odotusaikana.

console.log("Aloitus");

// Asynkroninen tehtävä: Aikakatkaisu 2 sekunnin kuluttua
setTimeout(function() {
  console.log("Timeout suoritettu 2 sekunnin jälkeen");
}, 2000);

console.log("Lopetus");

// Koodi jatkuu täällä välittömästi aikakatkaisun asettamisen jälkeen

Koodin tulostus:

• Aloitus
• Lopetus
• Timeout suoritettu 2 sekunnin jälkeen

Senior Frontend kehittäjä, joka on erikoistunut WordPressin koodaamiseen ja räätälöityjen ratkaisujen tekemiseen.