Hvordan ta et intervall i JavaScript?

I prosessen med å implementere forskjellige funksjonaliteter samtidig er det behov for å deaktivere en bestemt funksjonalitet i noen tid. Dette hjelper med å observere arbeidet med hver funksjonalitet. Noen ganger er det et krav å vise en spesifikk funksjonalitet for en definert tid og deretter deaktivere den. I slike tilfeller er det å ta et intervall i JavaScript.

Hvordan ta et intervall i JavaScript?

Følgende tilnærminger kan brukes i kombinasjon med "setInterval ()”Metode for å pause et intervall i JavaScript:

• “Boolsk verdi" nærme seg.
• “jQuery" nærme seg.
• “ClearInterval ()”Metode.

Tilnærming 1: Pause et intervall i JavaScript ved bruk av SetInterval () -metoden med boolsk verdi tilnærming

“setInterval ()”Metode kaller en bestemt funksjon med spesifiserte intervaller gjentatte ganger. Denne tilnærmingen kan implementeres for å tilordne en bestemt boolsk verdi til funksjonen som skal nås, noe som vil resultere i å pause og fjerne det angitte intervallet.

Syntaks

setInterval (funksjon, millisekunder)

I syntaks ovenfor:

• “funksjon”Henviser til funksjonen som skal utføres og“millisekunder”Er tidsintervallet.

Eksempel

For å demonstrere dette, lag et HTML -dokument og plasser følgende linjer inni det:

= "hode"> sekunder:



Gjenoppta
Pause

I koden ovenfor:

• Innen "”-Kode, inkluder“spenn”Element for å inkludere sekundene som skal gå.
• Etter det, lag to knapper som har vedlagte “ved trykk”Hendelse som omdirigerer til to separate funksjoner.
• En av de opprettede knappene vil resultere i å pause intervallet og den andre vil gjenoppta det.

Nå, i JavaScript -delen av koden:

Vassget = dokument.getElementById ("hode");
var pause = falsk;
VaR ElapsedTime = 0;
var t = setInterval (funksjon ()
hvis(!pause)
gåttetid ++;
få.Innertext = "Gledet sekunder:" + ElapsedTime;

, 1000);
FunctionResumeInterval ()
Pauset = falsk;

funksjonPauseInterval ()
Pauset = sant;

I ovennevnte kodebit:

• Få tilgang til “spenn”Element av det spesifiserte”id" bruker "dokument.getElementById ()”Metode.
• I neste trinn, tilordne en boolsk verdi “falsk" til "Pauset”Variabel. Tilsvarende initialiser variabelen “gikk av tid”Med“0”For å øke det.
• Nå, bruk “setInterval ()”Metode til funksjonen og økte den initialiserte forløpede tiden i form av sekunder da intervallet er satt til (1000 millisekunder = 1 sekund)
• I neste trinn, erklære en funksjon som heter “Fortsett ()”. Her, tilordne den boolske verdien som "falsk”Til den tidligere tildelte variabelen”Pauset”. Dette vil resultere i å gjenoppta det pauseintervallet på knappeklikk.
• Tilsvarende definer en funksjon som heter “PauseInterval ()”Som vil pause det angitte intervallet ved å tilordne den boolske verdien også som diskutert.

Produksjon

I ovennevnte utgang kan det observeres at ønsket krav er oppfylt.

Tilnærming 2: Pause et intervall i JavaScript ved bruk av SetInterval () -metoden med jQuery -tilnærmingen

Denne tilnærmingen kan implementeres for å få tilgang til knappen direkte, legge ved en hendelse og tilordne en boolsk verdi.

Syntaks

setInterval (funksjon, millisekunder)

I syntaks ovenfor:

• “funksjon”Henviser til funksjonen som skal utføres og“millisekunder”Er tidsintervallet.

Eksempel

Følgende kodesnippet demonstrerte konseptet:

= "hode"> sekunder:



Gjenoppta
Pause

I koden ovenfor:

• For det første, inkluder "jQuery”Bibliotek.
• I neste trinn kan du gjenopplive den diskuterte tilnærmingen for å inkludere "spenn”Element for å samle seg”sekunder" i det.
• Etter det, på samme måte, inkluderer to separate knapper for å pause og gjenoppta det pauseintervallet.

I jQuery -delen, gå gjennom følgende linjer i koden:

var get = $ ('span');
var pause = falsk;
VaR ElapsedTime = 0;
var t = vindu.setInterval (funksjon ()
hvis(!pause)
gåttetid ++;
få.tekst ("Gledet sekunder:" + gåttetid);

, 1000);
$ ('.pause').på ('klikk', funksjon ()
Pauset = sant;
);
$ ('.spille').på ('klikk', funksjon ()
Pauset = falsk;
);

I koden ovenfor, følg de uttalte trinnene:

• Hente “spenn”Element ved å peke på“element" Navn.
• I den videre koden, tildeler på samme måte en boolsk verdi til "Pauset”Variabel og initialiser den forløpte tiden med“0”.
• Nå, gjenoppliv den diskuterte tilnærmingen for å anvende “setInterval ()”Metode til funksjonen og øker på lignende måte den forløpte tiden i form av sekunder.
• Til slutt, fest "Klikk”Hendelse til begge de tilgjengelige knappene og tilordne den oppgitte boolske verdien til hver av knappene ved hjelp av jQuery”på()”Metode.

Produksjon

I den ovennevnte utgangen er det tydelig at tidtakeren blir satt på pause og gjenopptatt med suksess.

Tilnærming 3: Pause et intervall i JavaScript ved bruk av SetInterval () -metoden med ClearInterval () -metode

“ClearInterval ()”Metode tømmer den angitte tidtakeren i SetInterval () -metoden. Denne metoden kan brukes til å pause det innstilte intervallet “permanent”.

Syntaks

setInterval (funksjon, millisekunder)

I syntaks ovenfor:

• “funksjon”Henviser til funksjonen som skal utføres og“millisekunder”Er det faste tidsintervallet.

ClearInterval (intervall)

I syntaks ovenfor:

• “intervall”Henviser til intervallet som returneres fra SetInterval () -metoden

Eksempel

Gå gjennom de uttalte kodelinjene:

= "head" style = "font-weight: fet;"> sekunder:



Pause

• Gjenta de diskuterte trinnene i de tidligere metodene for å inkludere “spenn”Element.
• I neste trinn, på samme måte, oppretter en knapp med en "ved trykk”Hendelse som påkaller funksjonen PauseInterval ().

Utfør de uttalte trinnene i JavaScript -delen av koden:

Vassget = dokument.getElementById ("hode");
VaR ElapsedTime = 0;
var t = setInterval (funksjon ()
gåttetid ++;
få.Innertext = "Gledet sekunder:" + ElapsedTime;
, 1000);
funksjonPauseInterval ()
clearInterval (t);

• I det første trinnet får du tilgang til "spenn”Element av dets“id" bruker "dokument.getElementById ()”Metode.
• Gjenta de diskuterte metodene for å initialisere “Gåret”Tid, påføring av“setInterval ()”Metode, og øke den uttalte tiden i henhold til det fastsatte intervallet.
• Til slutt erklærer en funksjon som heter “PauseInterval ()”. Her, bruk "ClearInterval ()”Metode som har funksjonen”t”Som parameter som intervallet er satt. Dette vil resultere i å pause det faste intervallet permanent.

Produksjon

Her blir tidtakeren pause permanent.

Vi har samlet tilnærmingene for å pause et intervall i JavaScript.

Konklusjon

“boolsk verdi”Tilnærming,“jQuery”Tilnærming, eller“ClearInterval ()”Metode kan brukes for å pause et intervall i JavaScript. Den første tilnærmingen kan brukes for å tilordne en tilsvarende boolsk verdi på den tilgjengelige funksjonen for å pause og gjenoppta den angitte timeren. JQuery -tilnærmingen kan brukes til å få tilgang til knappen direkte, legge ved en hendelse og tilordne en boolsk verdi som resulterer i total mindre kodekompleksitet. ClearInterval () -metoden kan implementeres for å pause det faste intervallet permanent. Denne opplæringen forklarte tilnærmingene for å pause et intervall i JavaScript.