JavaScript setTimeout -opastus - JS-ekvivalentin käyttäminen lepotilassa, odottamisessa, viiveessä ja taukossa

JavaScript on web-kieli. Ja se ei ole ollut sama ES5: n julkaisun jälkeen. Yhä enemmän ideoita ja ominaisuuksia siirretään eri kieliltä ja integroidaan JavaScriptiin.

Yksi näistä ominaisuuksista on Promises, jotka ovat todennäköisesti eniten käytetty ominaisuus JavaScriptissä ES5: n julkaisun jälkeen.

Mutta yksi JavaScriptin kaipaamista asioista on tapa "keskeyttää" suoritus hetkeksi ja jatkaa sitä myöhemmin. Tässä viestissä keskustelen siitä, miten voit saavuttaa tämän ja mitä todella tarkoittaa "keskeyttää" tai "nukkua" JavaScriptissä.

Spoileri: JavaScript ei koskaan "pysähdy".

TL; DR

Tässä on copy-pasta-koodi, joka tekee työn:

/** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) }

Mutta mitä täällä todella tapahtuu?

setTimeout ja väärennetyt lupaukset

Katsotaanpa nopea esimerkki käyttämällä yllä olevaa katkelmaa (keskustelemme siitä, mitä siinä tapahtuu myöhemmin):

async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() }

Kun tämä toiminto performBatchActionskutsutaan, se yksinkertaisesti suorittaa performAPIRequesttoiminnon, odottaa noin 5 sekuntia ja kutsuu sitten saman toiminnon uudelleen. Huomaa, kuinka kirjoitin noin 5 sekuntia , en 5 sekuntia.

Vahva muistiinpano laitettavaksi sinne: yllä oleva koodi ei takaa täydellistä unta. Se tarkoittaa, että jos määrität kestoksi esimerkiksi 1 sekunnin, JavaScript ei takaa, että se alkaa käyttää koodia lepotilan jälkeen täsmälleen 1 sekunnin kuluttua.

Miksi ei? voit kysyä. Valitettavasti se johtuu siitä, että ajastimet toimivat JavaScriptissä ja yleensä tapahtumasilmukoissa. JavaScript kuitenkin takaa ehdottomasti, että koodinpätkä unen jälkeen ei koskaan toteudu ennen määritettyä aikaa.

Joten meillä ei todellakaan ole täyttä määrittelemätöntä tilannetta, vain osittaista. Ja useimmissa tapauksissa se on vain muutaman millisekunnin sisällä.

JavaScript on yksisäikeinen

Yksi ketju tarkoittaa, että JavaScript-prosessi ei voi oikeastaan ​​mennä pois tieltä ollenkaan. Sen on tehtävä kaikki asiat - tapahtumakuuntelijoista HTTP-soittopyyntöihin samalla pääketjulla. Ja kun yksi asia on toteuttamassa, toista ei voi suorittaa.

Harkitse verkkosivua, jossa sinulla on useita painikkeita ja suoritat yllä olevan koodin simuloida lepotilaa, sanotaanpa, 10 sekuntia. Mitä odotat tapahtuvan?

Ei mitään. Verkkosivusi toimii hienosti, painikkeesi reagoivat, ja kun 10 sekunnin uni on valmis, vieressä oleva koodi suoritetaan. Joten on ilmeistä, että JavaScript ei todellakaan estä koko pääketjua, koska jos se tekisi niin, verkkosivusi olisi jähmettynyt ja painikkeista olisi tullut napsauttamattomia.

Joten kuinka JavaScript tosiasiallisesti keskeytti yhden säikeen, keskeyttämättä sitä koskaan?

Tapaa tapahtumasilmukka

Toisin kuin muut kielet, JavaScript ei vain jatka koodin suorittamista lineaarisesti ylhäältä alas. Se on asynkroninen tapahtumavetoinen kieli, jossa on paljon taikuutta tapahtumasilmukan muodossa.

Tapahtumasilmukka jakaa koodisi synkronisissa ja tietyissä tapahtumissa, kuten ajastimissa ja HTTP-pyynnöissä. Tarkalleen ottaen on olemassa kaksi jonoa - tehtäväjono ja mikrotaskujono.

Aina kun suoritat JS: n, ja siellä on asynkroninen asia (kuten hiiren napsautustapahtuma tai lupaus), JavaScript heittää sen tehtäväjonoon (tai mikrotaskujonoon) ja jatkaa suorittamista. Kun se suorittaa "yhden rasti", se tarkistaa, onko tehtäväjonoilla ja mikrotaskujonolla jonkin verran työtä. Jos kyllä, se suorittaa soittopyynnön / suorittaa toiminnon.

Suosittelen kaikkia, jotka ovat kiinnostuneita tapahtumasilmukoiden yksityiskohtaisesta toiminnasta, katsomaan tätä videota:

Johtopäätös

Tulit tänne yksinkertaisen nukkumisopetuksen saamiseksi JavaScriptissä ja päädyit oppimaan yhdestä JavaScriptin ytimestä - tapahtumasilmukat! Hämmästyttävää, eikö olekin?

No, jos pidit artikkelista, checkout codedamn - foorumi, jonka olen rakentanut kehittäjille ja sinun kaltaisillesi oppijoille. Yhdistetään myös sosiaalisessa mediassa - twitter ja Instagram. Nähdään pian!

Rauha