Hvordan forsinke/vente i utførelse av JavaScript -kode?

Funksjoner som kan forsinke eller stoppe utførelsen av en kodebit er veldig avgjørende på et programmeringsspråk, da de er en måte å kontrollere strømmen av programmet. Det er mange innebygde “forsinkelse”Eller“vente”Funksjoner tilgjengelig på de fleste programmeringsspråk. Men i JavaScript er det ingen forsinkelse, vent eller søvnfunksjon fordi det er et skriptspråk og skriptspråk er alltid synkrone og enkelttrådet.

Til å begynne med kan det ikke virke som en stor sak, men når du går videre i programmeringsverdenen, vil du innse viktigheten av "forsinkelse" og "vent" -funksjoner. Så hvis det ikke er noen vent \ forsinkelse \ søvnfunksjon, er det ingen måte å kontrollere utførelsen av et program i JavaScript? Vel, det er forskjellige funksjoner og metoder som hjelper oss å oppnå den samme oppgaven i JavaScript.

Bruke Settimeout () -funksjon

Den første og den vanligste metoden for å implementere en forsinkelse i utførelsen av en JavaScript -kode er å bruke setTimeout () metode. Du vil gjøre en veldig vanlig feil å anta at syntaks er:

setTimeout (forsinkelse i MS);

Mens i virkeligheten tar denne metoden en tilbakeringingsfunksjon. Husk at vi kan se på syntaksen som:

Syntaks av Settimeout () -funksjonen

setTimeout (funksjon, forsinkelse i MS);

Å bedre forstå arbeidet med setTimeout () Metode, la oss prøve å løse et problem.

Eksempel
Anta at vi ønsker å skrive ut tall fra 1 til 10, med en forsinkelse på 1 sekund mellom hvert nummer.

Den tradisjonelle måten ville være:

for (la i = 1; i <=10 ; i++ )
setTimeout (1000);
konsoll.logg (i);

Utgangen fra koden skriver øyeblikkelig ut alle 10 sifrene som:

Fordi vi ikke sender noe til metoden Settimeout ().

For å legge til forsinkelsen ved hjelp av Settimeout () -metoden tror vi at den riktige måten er:

for (la i = 1; jeg konsoll.logg (i), 1000);

I stedet for å få en 1 sekunders forsinkelse etter hvert tall, er det vi får en 1 sekunders forsinkelse i starten av, og deretter skrives alle tallene umiddelbart. Som vist under:

Vi hadde den første forsinkelsen, men ingen forsinkelse etter det. Hvorfor er det slik? Vel, måten setTimeout () Arbeid er at det alltid kjører i synkron modus. Dette betyr at selv å ha flere samtaler til samme funksjon vil resultere i forsinkelsen på 1 sek.

Det vi gjorde var at vi påkalte hver setTimeout () metode etter hverandre og på grunn av den asynkrone naturen til setTimeout () metode, den venter ikke på forrige setTimeout () metode for å fullføre og deretter utføre den neste.

Så til slutt ringte vi 10 samtaler til setTimeout () Metode som har samme forsinkelsestid. Det er en måte å fikse dette på, og det er ved å bruke økende forsinkelsestimer som:

setTimeout (() => konsoll.logg (i), 1000);
setTimeout (() => konsoll.Log (i), 2000);
setTimeout (() => konsoll.logg (i), 3000);

Ovennevnte kodeeksempel på å skrive ut 10 tall vil bli dette:

for (la i = 1; jeg konsoll.logg (i), i * 1000);

Vi bruker den økende verdien av "jeg" -variabelen og multipliserer den med 1 sekunders forsinkelse for å skape økende forsinkelser for hver samtale av setTimeout ()

Utgangen med dette blir:

Vi gjorde det endelig. Men det er fortsatt noe galt her. Det er det faktum at beregning av forsinkelser på denne måten er veldig komplisert, spesielt når du jobber i en applikasjon i den virkelige verden. Det er en måte for det også, lag din egen forsinkelse/ventemetode.

Hvordan kode din egen forsinkelse/ventefunksjon?

Vi vil ha en bedre løsning, det vi kan gjøre er å kode vår egen "forsinkelse”Metode. Vi bruker setTimeout () funksjon og lover å hjelpe oss med å lage "forsinkelse”Metode som:

Vi vil ganske enkelt opprette en funksjon med navnet "forsinkelse" og passere den i millisekunder. Denne "forsinkelses" -funksjonen returnerer et løfte og vil ikke la utførelsen fortsette før løftet er løst.

funksjon forsinkelse (ms)
Return New Promise (Resolve => Settimeout (Resolve, MS));

Nå kaller vi denne "forsinkelses" -funksjonen med en ".deretter ”Operatør. Som dette:

konsoll.logg ("hei");
Forsinkelse (2000).da (() => konsoll.Logg ("Verden!"););

Utgangen ville være:

Vi skaper et løfte og setTimeout () metode med litt forsinkelse til Løse de love. Du kan lese mer om JavaScript -løfter.

I tilfelle du vil bli kvitt .deretter() metode, og for å kjede forsinkelsene, det vi kan gjøre er å bruke async og avvente med vår "forsinkelse" -funksjon.

async funksjon demo ()
konsoll.logg ("dette er en");
Venter forsinkelse (1000);
konsoll.Logg ("Linuxhint");
Venter forsinkelse (1000);
konsoll.Logg ("Tutorial!");

Merk: Vi må legge til async nøkkelord med funksjonen som kaller forsinkelse() metode. Hvis vi kjører programmet det vi får, er dette:

Når vi kommer til problemet vårt, tallskriveren fra 1 til 10, må vi lage den inne i en async -funksjon og kalle “forsinkelse” -metoden som vi nettopp har laget som:

async funksjonsnummerPrinter ()
for (la i = 1; i <= 10; i++)
konsoll.logg (i);
Venter forsinkelse (1000)

Og vi må kalle denne funksjonen med:

NumberPrinter ();

Utgangen vi får med dette er:

Det er det for vår "forsinkelsesfunksjon".

Konklusjon

Det er ingen innebygd vente, forsinkelse, eller søvnfunksjon i JavaScript, men vi kan bruke setTimeout () metode for å etterligne forsinkelsesatferden, og vi kan til og med kode vår egen forsinkelse() metode for å lage en forsinkelse i utførelsen av programmet. Vi har lært hvordan setTimeout () Metoden fungerer, hvordan det er vanlig å misforstå dens arbeid og bruk. Dessuten lærte vi hvordan vi kan kombinere metoden Settimeout () med løfter for å lage vår egen forsinkelsesmetode, og vi lærte også hvordan vi bruker async og avvente på vår funksjon for å vente og deretter fortsette utførelsen.