JavaScripti setTimeouti õpetus - kuidas kasutada unerežiimi, ootamise, viivituse ja pausi JS-ekvivalenti

JavaScript on veebikeel. Ja see pole olnud sama pärast ES5 väljaandmist. Üha rohkem ideid ja funktsioone teisaldatakse erinevatest keeltest ja integreeritakse JavaScripti.

Üks neist funktsioonidest on lubadused, mis on pärast ES5 väljaandmist tõenäoliselt kõige enam kasutatav JavaScripti funktsioon.

Kuid üks asi, millest JavaScript puudust tunneb, on viis, kuidas käivitamine mõneks ajaks peatada ja seda hiljem jätkata. Selles postituses arutlen, kuidas saate seda saavutada ja mida tegelikult tähendab JavaScripti "paus" või "magamine".

Spoiler: JavaScripti kunagi "ei peata".

TL; DR

Siin on copy-pasta kood, mis seda tööd teeb:

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

Aga mis siin tegelikult toimub?

setTimeout ja võltsitud lubadused

Vaatame ülaltoodud juppi kasutades kiiret näidet (arutame hiljem, mis selles toimub):

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

See funktsioon performBatchActions, kui seda kutsutakse, lihtsalt täidab performAPIRequestfunktsiooni, ootab umbes 5 sekundit ja kutsub sama funktsiooni uuesti. Pange tähele, kuidas ma kirjutasin umbes 5 sekundit ja mitte 5 sekundit.

Tugev märkus, mida sinna panna: ülaltoodud kood ei taga täiuslikku und. See tähendab, et kui määrate kestuseks näiteks 1 sekund, ei garanteeri JavaScript, et see hakkab koodi käivitama pärast unerežiimi täpselt 1 sekundi pärast.

Miks mitte? võite küsida. Kahjuks on see tingitud sellest, et taimerid töötavad JavaScripti ja üldiselt ka sündmuste tsüklites. Kuid JavaScript garanteerib absoluutselt, et koodijuppi pärast und ei täideta kunagi enne määratud aega.

Nii et meil pole tegelikult täielikku määramatut olukorda, vaid osalist. Ja enamikul juhtudel jääb see ainult mõne millisekundi piiresse.

JavaScript on ühe keermega

Üks lõng tähendab, et JavaScripti protsess ei saa tegelikult üldse kõrvale minna. See peab tegema kõiki asju - alates sündmuste kuulajatest kuni HTTP tagasihelistamiseni - samal peaniidil. Ja kui üks asi on täide viidud, siis teine ​​ei saa seda teostada.

Mõelgem veebilehele, kus teil on mitu nuppu ja käivitate ülaltoodud koodi, et simuleerida une, näiteks 10 sekundit. Mis te arvate, mis juhtub?

Mitte midagi. Teie veebileht töötab suurepäraselt, teie nupud on reageerivad ja kui 10 sekundiline uni on tehtud, käivitatakse selle kõrval olev kood. Seega on ilmne, et JavaScript ei blokeeri tegelikult kogu põhilõnga, sest kui see seda teeks, oleks teie veebileht külmutatud ja nupud oleksid klõpsamatuks muutunud.

Niisiis, kuidas JavaScript peatas tegelikult ühe lõime, ilma et see oleks kunagi seda peatanud?

Tutvuge Event Loopiga

Erinevalt teistest keeltest jätkab JavaScript koodi täitmist ainult lineaarselt ülevalt alla. See on asünkroonne sündmustepõhine keel, mis sisaldab palju maagiat sündmuse silmuse kujul.

Sündmuse silmus jagab teie koodi sünkroonseteks ja teatud sündmusteks nagu taimerid ja HTTP-päringud. Täpselt öeldes on kaks järjekorda - ülesande järjekord ja mikrotasandi järjekord.

Alati, kui käivitate JS-i ja seal on asünkroonne asi (näiteks hiireklõpsu sündmus või lubadus), viskab JavaScripti see ülesandejärjekorda (või mikrotaskujärjekorda) ja jätkab täitmist. Kui ta täidab "ühe linnukese", kontrollib ta, kas tööülesannete ja mikrotegumijärjekordade jaoks on mõni töö. Kui jah, siis täidab see tagasihelistamise / toimingu.

Ma tõesti soovitaksin kõigil, kes on huvitatud sündmuste ahelate üksikasjalikust toimimisest, seda videot vaadata:

Järeldus

Tulite siia JavaScripti lihtsa unerežiimi saamiseks ja õppisite lõpuks JavaScripti ühe põhiasja - sündmuste tsüklit! Hämmastav, kas pole?

Noh, kui artikkel teile meeldis, siis tehke checkout codedamn - platvorm, mille olen ehitanud teie sarnastele arendajatele ja õppijatele. Ühendame end ka sotsiaalmeedias - twitteris ja Instagramis. Varsti näeme!

Rahu