JavaScript setTimeout-vejledning - Sådan bruges JS-ækvivalent til søvn, vent, forsink og pause

JavaScript er Internets sprog. Og det har ikke været det samme, siden ES5 blev frigivet. Flere og flere ideer og funktioner overføres fra forskellige sprog og integreres i JavaScript.

En af disse funktioner er løfter, som sandsynligvis er den mest anvendte funktion i JavaScript, efter at ES5 blev frigivet.

Men en af ​​de ting, som JavaScript savner, er en måde at "pause" udførelsen et stykke tid og genoptage den senere. I dette indlæg vil jeg diskutere, hvordan du kan opnå det, og hvad det virkelig betyder at "pause" eller "sove" i JavaScript.

Spoiler: JavaScript "pauser" aldrig rigtig.

TL; DR

Her er kopipasta-koden, der gør jobbet:

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

Men hvad sker der virkelig her?

setTimeout og falske løfter

Lad os se et hurtigt eksempel ved hjælp af ovenstående uddrag (vi diskuterer hvad der sker i det senere):

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

Når denne funktion performBatchActionskaldes, udfører den simpelthen performAPIRequestfunktionen, venter ca. 5 sekunder og kalder derefter den samme funktion igen. Bemærk hvordan jeg skrev omkring 5 sekunder og ikke 5 sekunder.

En stærk note at sætte derude: Ovenstående kode garanterer ikke en perfekt søvn. Det betyder, at hvis du angiver varighed, fx 1 sekund, garanterer JavaScript ikke, at det begynder at køre koden efter dvaletilstand nøjagtigt efter 1 sekund.

Hvorfor ikke? kan du spørge. Desværre skyldes det, at timere fungerer i JavaScript og generelt begivenhedssløjfer. JavaScript garanterer dog absolut, at kodestykket efter søvn aldrig udføres før det angivne tidspunkt.

Så vi har ikke rigtig en fuldstændig ubestemt situation, bare en delvis. Og i de fleste tilfælde er det kun inden for en margen på få millisekunder.

JavaScript er enkelt gevind

En enkelt tråd betyder, at en JavaScript-proces slet ikke kan gå ud af vejen. Det skal gøre alle tingene - fra begivenhedslyttere til HTTP-tilbagekald på samme hovedtråd. Og når en ting udføres, kan en anden ikke udføre.

Overvej en webside, hvor du har flere knapper, og du kører koden ovenfor for at simulere en dvale i, lad os sige, 10 sekunder. Hvad forventer du vil ske?

Ingenting overhovedet. Din webside fungerer fint, dine knapper reagerer, og når 10 sekunders søvn er færdig, udføres koden ved siden af ​​den. Så det er tydeligt, at JavaScript ikke rigtig blokerer hele hovedtråden, for hvis den gjorde det, ville din webside være frosset, og knapperne ville være ikke-klikbare.

Så hvordan pauserede JavaScript faktisk en enkelt tråd uden nogensinde at sætte den på pause?

Mød Event Loop

I modsætning til andre sprog fortsætter JavaScript ikke bare med at udføre kode lineært fra top til bund. Det er et asynkront begivenhedsdrevet sprog med masser af magi i form af begivenhedssløjfen.

En begivenhedssløjfe opdeler din kode i synkrone og bestemte begivenheder - som timere og HTTP-anmodninger. Præcis sagt er der to køer - en opgavekø og mikrotaskekø.

Når du kører JS, og der er en asynkron ting (som en museklikhændelse eller et løfte), kaster JavaScript det i opgavekøen (eller mikrotaskekøen) og fortsætter med at udføre. Når det udfylder et "enkelt kryds", kontrollerer det, om opgavekøerne og mikrotaskekøen har noget arbejde til det. Hvis ja, udfører det tilbagekaldet / udfører en handling.

Jeg vil virkelig anbefale enhver, der er interesseret i den detaljerede funktion af begivenhedssløjfer, at se denne video:

Konklusion

Du kom her for en simpel søvninstruktion i JavaScript og endte med at lære om en af ​​de vigtigste ting i JavaScript - begivenhedsløkker! Fantastisk, er det ikke?

Nå, hvis du kunne lide artiklen, checkout codedamn - en platform, jeg har bygget for udviklere og elever som dig. Lad os også oprette forbindelse på sociale medier - twitter og Instagram. Vi ses snart!

Fred