JavaScript SetInterval og Settimeout -metoder forklart

JavaScript er et nettprogrammeringsspråk på høyt nivå der hver kodeuttalelse utføres linje for linje. Anta imidlertid at du vil utføre litt kode eller funksjon på et senere tidspunkt (i fremtiden) og ikke umiddelbart. Dette kalles planlegging av en samtale i JavaScript og kan oppnås med de to innebygde metodene; setTimeout () og setInterval ().

Dette innlegget diskuterer hva setInterval () og setTimeout () Innebygde metoder er i JavaScript. Før vi går videre skal det imidlertid bemerkes at disse to metodene ikke er en del av JavaScript -spesifikasjonen og er en del av HTML -standardspesifikasjonen, men støttes i alle de store nettleserne.

Hva er metoden Settimeout ()?

De setTimeout () Metoden brukes til å kjøre en spesifikk kode i fremtiden og ikke umiddelbart ved å ringe en tilbakeringingsfunksjon etter et bestemt tidsintervall. Tilbakeringingsfunksjonen er definert som funksjonen som er gitt til en annen funksjon som et argument og utført i den ytre funksjonen senere.

Syntaks av setTimeout () -metode

De Syntaks av setTimeout () er gitt nedenfor:

setTimeout (callbackfunc, millisekunder);

Det første argumentet som vi gir til setTimeout () Metode er tilbakeringingsfunksjonen som utføres etter de medfølgende millisekunder.

Eksempel
La oss gå gjennom et eksempel der vi vil sette setTimeout () Metode på en knapp og når brukeren klikker på den knappen, blir tilbakeringingsfunksjonene utført etter 2 sekunder:

Prøv det

I tilbakeringingsfunksjonen initialiserte vi et varsel som vil vises etter to sekunder med meldingen Hallo.

Hva er SetInterval () -metoden?

De setInterval () Metoden er den samme som setTimeout () Siden den også utfører en tilbakeringingsfunksjon etter en bestemt tid, men med unntak av at den utfører tilbakeringingsfunksjonen kontinuerlig etter det spesifikke tidsintervallet.

Syntaks av setInterval () -metode

De Syntaks av setInterval () Metoden er som følger:

SetInterval (myfunc, millisekunder);

Som setTimeout () Det første argumentet er tilbakeringingsfunksjonen som vil bli utført etter det spesifiserte antallet millisekunder, og utførelsen vil bli gjentatt kontinuerlig etter denne spesifikke tiden.

Eksempel
La oss gå gjennom et eksempel der vi vil vise gjeldende systemtid etter hvert 1 -sekund.

const myfunc = () =>
const d = ny dato ();
konsoll.Logg (d.tolocaletimestring ());

SetInterval (MyFunc, 1000);

I koden ovenfor opprettet vi først en funksjon der vi opprettet en ny dato ved hjelp av Dato Objekt og konsoll logget systemtiden.

Etter å ha definert funksjonen, brukte vi setInterval () metode, passert funksjonsnavnet og 1000 millisekunder som er 1 sekund. Nå kjøres funksjonen etter hvert 1 -sekund, og vi vil se systemtiden vår på konsollloggen etter hvert sekund:

Utførelsesstopp av Settimeout () og SetInterval ()

Hvis du ikke vil ha tilbakeringingsfunksjonen til setInterval () eller setTimeout () For å utføre lenger, kan vi bruke stoppmetodene som er tilgjengelige i JavaScript for begge.

clearTimeout () -metode
For å stoppe utførelsen av setTimeout () funksjon vi kan bruke ClearTimeout () metode som vil ta en variabel/id som returneres fra setTimeout () Metode som et argument.

Eksempel
I dette eksemplet vil vi stoppe utførelsen av tilbakekallingsfunksjonen definert med Settimeout () -metoden:

Prøv det
Stoppe

Ovennevnte kode som er vist er en utvidet form for setTimeout () -eksemplet vist tidligere. I denne koden la vi til en annen knapp med navnet på Stoppe og påberopte stopp () -funksjonen når en bruker klikker på stoppknappen. Stop () -funksjonen har clearTimeout () som har en variabel t som argument. Variabelen T er ganske enkelt en ID som er returnert fra Settimeout () -funksjonen.

Når en bruker klikker på Prøve den -knappen så etter tre sekunder ser vi Hallo i varselet som vi har sett. Imidlertid, hvis brukeren nå klikker på stoppknappen før 3 sekunder, vil ikke tilbakekallingsfunksjonen min Function bli påkalt, og derfor vil vi ikke se et varsel. Dette fenomenet er vist nedenfor:

clearInterval () -metode
Tilsvarende for å stoppe utførelsen av setInterval () funksjon, vi kan bruke ClearInterval () metode som også vil ta variabelen returnert fra setInterval () som et argument.

Eksempel

La oss gå gjennom et eksempel der vi vil stoppe utførelsen av tilbakeringingsfunksjonen til setInterval () metode.

Stopp tiden

I koden ovenfor definerte vi en knapp i HTML og initialiserte deretter OnClick -hendelsen på denne knappen. Når brukeren klikker på den definerte knappen, er setInterval () Metoden vil slutte å utføre.

Da vi klikket på "Stopptid" -knappen, sluttet systemetiden å vises på konsollloggen vår:

Konklusjon

De setTimeout () og setInterval () Metoder planlegger begge en samtale som skal utføre en funksjon senere etter et spesifisert antall millisekunder med unntak av at setInterval () utfører en funksjon kontinuerlig etter den spesifikke tiden, i motsetning til setTimeout () metode som utfører en funksjon bare en gang etter den spesifiserte tiden.

I dette innlegget diskuterte vi hva setTimeout () og setInterval () Metoden er og vi så eksemplene deres sammen med skjermbilder av utgangen. Til slutt så vi også hvordan vi skulle stoppe utførelsen av tilbakeringingsfunksjonene knyttet til setTimeout () og setInterval () metoder.