Vodič za JavaScript setTimeout - Kako koristiti JS ekvivalent spavanja, čekanja, odgode i pauze

JavaScript je jezik weba. I nije isto otkako je ES5 objavljen. Sve više ideja i značajki prenosi se s različitih jezika i integrira u JavaScript.

Jedna od tih značajki su Promises, koja su vjerojatno najčešće korištena značajka u JavaScript-u nakon izlaska ES5-a.

Ali jedna od stvari koje JavaScript propušta je način da se "zaustavi" izvršenje na neko vrijeme i nastavi kasnije. U ovom postu raspravit ću o tome kako to možete postići i što zapravo znači "pauzirati" ili "spavati" u JavaScript-u.

Spoiler: JavaScript nikada zapravo "ne zastaje".

TL; DR

Evo copy-paste koda koji obavlja posao:

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

Ali što se ovdje zapravo događa?

setTimeout i lažna obećanja

Pogledajmo brzi primjer pomoću gornjeg isječka (kasnije ćemo razgovarati o tome što se u njemu događa):

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

Ova funkcija performBatchActions, kada je pozvana, jednostavno izvršava performAPIRequestfunkciju, čeka oko 5 sekundi , a zatim ponovno poziva istu funkciju. Primijetite kako sam napisao oko 5 sekundi , a ne 5 sekundi.

Snažna napomena: gornji kod ne garantira savršen san. To znači da ako odredite trajanje od, recimo, 1 sekunde, JavaScript ne jamči da će kôd početi pokretati nakon mirovanja točno nakon 1 sekunde.

Zašto ne? možete pitati. Nažalost, to je zato što odbrojivači rade u JavaScriptu i općenito, petljama događaja. Međutim, JavaScript apsolutno garantira da se dio koda nakon mirovanja nikada neće izvršiti prije određenog vremena.

Dakle, zapravo nemamo potpuno neodređenu situaciju, već samo djelomičnu. U većini slučajeva to je u roku od samo nekoliko milisekundi.

JavaScript je jednonitni

Jedna nit znači da JavaScript postupak uopće ne može zaobići. Mora raditi sve stvari - od slušatelja događaja, do HTTP povratnih poziva, na istoj glavnoj niti. A kada se jedna stvar izvršava, druga se ne može izvršiti.

Razmislite o web stranici na kojoj imate više gumba i pokrećete gornji kod da biste simulirali spavanje, recimo, 10 sekundi. Što očekujete da će se dogoditi?

Baš ništa. Vaša će web stranica raditi sasvim u redu, gumbi će reagirati, a nakon 10 sekundi mirovanja izvršit će se kôd do nje. Dakle, očito je da JavaScript zapravo ne blokira cijelu glavnu nit, jer da je to učinio, vaša bi se web stranica zamrznula, a gumbi bi postali ne-kliknuti.

Pa kako je JavaScript zapravo zaustavio jednu nit, a da je nikad nije zaustavio?

Upoznajte petlju događaja

Za razliku od ostalih jezika, JavaScript ne izvodi samo linearno izvršavanje koda od vrha do dna. To je asinkroni jezik vođen događajima s mnoštvom magije u obliku petlje događaja.

Petlja događaja razdvaja vaš kôd na sinkrone i određene događaje - poput tajmera i HTTP zahtjeva. Precizno govoreći, postoje dva reda čekanja - red zadataka i red mikrozadatki.

Kad god pokrenete JS i dogodi se asinkrona stvar (poput klikova mišem ili obećanja), JavaScript je baci u red zadataka (ili red mikrozadatki) i nastavlja izvršavati. Kada dovrši "jednu oznaku", provjerava imaju li redovi zadataka i red mikrozadaca neki posao za to. Ako je odgovor da, izvršit će povratni poziv / izvršiti radnju.

Zaista bih preporučio svima koji su zainteresirani za detaljan rad petlji događaja da pogledaju ovaj video:

Zaključak

Došli ste ovdje zbog jednostavnih uputa za spavanje u JavaScriptu i na kraju ste saznali jednu od osnovnih stvari u JavaScriptu - petlje događaja! Nevjerojatno, zar ne?

Pa, ako vam se svidio članak, naručite codedamn - platformu koju sam izgradio za programere i učenike poput vas. Također, povežimo se na društvenim mrežama - twitteru i Instagramu. Vidimo se uskoro!

Mir