JavaScript setTimeout oktatóanyag - Az alvás, várakozás, késleltetés és szünet JS egyenértékének használata

A JavaScript a web nyelve. És az ES5 megjelenése óta nem ugyanaz. Egyre több ötlet és szolgáltatás kerül átadásra különböző nyelveken, és beépül a JavaScript-be.

Az egyik ilyen funkció az Promises, amelyek valószínűleg a legszélesebb körben használják a JavaScript szolgáltatásait az ES5 megjelenése után.

De az egyik dolog, amelyet a JavaScript hiányol, az a módszer, hogy egy ideig "szüneteltesse" a végrehajtást, és később folytassa. Ebben a bejegyzésben megvitatom, hogyan érheted el ezt, és mit is jelent valójában a "szünet" vagy az "alvás" a JavaScript-ben.

Spoiler: A JavaScript soha nem "szünetel".

TL; DR

Itt van a copy-pasta kód, amely elvégzi a munkát:

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

De mi történik itt valójában?

setTimeout és hamis ígéretek

Nézzünk meg egy gyors példát a fenti részlet segítségével (később megbeszéljük, mi történik benne):

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

Ez performBatchActionsa performAPIRequestfunkció híváskor egyszerűen végrehajtja a funkciót, vár körülbelül 5 másodpercet , majd újra meghívja ugyanazt a funkciót. Ne feledje, hogy 5 másodpercet írtam , és nem 5 másodpercet.

Nagyon fontos megjegyezni: a fenti kód nem garantálja a tökéletes alvást. Ez azt jelenti, hogy ha az időtartamot mondjuk 1 másodpercnek adja meg, akkor a JavaScript nem garantálja , hogy az alvás után pontosan 1 másodperc múlva elkezdi futtatni a kódot.

Miért ne? megkérdezheti. Sajnos azért, mert az időzítők JavaScript-ben és általában eseményhurokban működnek. A JavaScript azonban mindenképpen garantálja, hogy az alvás utáni kóddarab soha nem fog végrehajtódni a megadott idő előtt .

Tehát valójában nincs teljes határozatlan helyzetünk, csak részleges. És a legtöbb esetben ez csak néhány milliszekundumon belül marad.

A JavaScript egyszálú

Egyetlen szál azt jelenti, hogy egy JavaScript-folyamat egyáltalán nem kerülhet ki az útból. Minden dolgot meg kell tennie - az eseményhallgatóktól a HTTP visszahívásokig, ugyanazon a fő szálon. És amikor egy dolog végrehajtódik, egy másik nem hajtható végre.

Vegyünk egy weboldalt, amelyben több gombbal rendelkezik, és futtatja a fenti kódot, hogy szimulálja az alvást mondjuk 10 másodpercig. Mit vársz, mi fog történni?

Semmi sem. Webhelye remekül fog működni, gombjai reagálni fognak, és miután a 10 másodperces alvás befejeződik, a mellette lévő kód végrehajtásra kerül. Tehát nyilvánvaló, hogy a JavaScript nem igazán blokkolja az egész fő szálat, mert ha ezt megtenné, akkor weboldala lefagyott volna, és a gombok nem kattinthatók lettek volna.

Tehát hogyan szüneteltette a JavaScript valójában egyetlen szálat anélkül, hogy valaha is szüneteltette volna?

Ismerje meg az Event Loop-ot

Más nyelvektől eltérően a JavaScript nem csak folytatja a kód futtatását lineárisan fentről lefelé. Ez egy aszinkron eseményvezérelt nyelv, rengeteg mágiával az eseményhurok formájában.

Egy eseményhurok felosztja a kódot szinkron és bizonyos eseményekben - például időzítőkben és HTTP-kérelmekben. Pontosabban szólva két sor áll rendelkezésre - a feladatsor és a mikrotask sor.

Valahányszor futtatja a JS-t, és van egy aszinkron dolog (például egérkattintásos esemény vagy ígéret), a JavaScript bedobja a feladatsorba (vagy a mikrotask sorba), és folytatja a végrehajtást. Amikor befejezi az "egyetlen pipát", akkor ellenőrzi, hogy a feladatsorok és a mikrotask várólisták működnek-e rajta. Ha igen, akkor végrehajtja a visszahívást / végrehajt egy műveletet.

Nagyon ajánlom mindenkinek, akit érdekel az eseményhurkok részletes működése, nézze meg ezt a videót:

Következtetés

Azért jöttél ide, hogy egy egyszerű alvási utasítást kapj JavaScript-ben, és végül megismerkedtél a JavaScript egyik alapvető dolgával - az eseményhurokkal! Elképesztő, nem?

Nos, ha tetszett a cikk, fizessen a codedamn - egy platformot, amelyet építettem olyan fejlesztők és tanulók számára, mint te. Csatlakozzunk a közösségi médiához - a twitterhez és az Instagramhoz is. Hamarosan találkozunk!

Béke