Hvad er SetInterval i JavaScript, og hvordan fungerer det?

JavaScript bruges som et programmeringssprog på klientsiden såvel som et programmeringssprog på serversiden. Detgiver en overflod af metoder til at udføre flere funktioner let. Det er det, der skabte et af de mest populære programmeringssprog såvel som det bruges også bredt på tværs af flere slags produktudvikling.SetInterval i JavaScript er en del af Timing Events i JavaScript, og vi lærer om det i følgende rækkefølge:

• Timing Begivenheder
• SetInterval i JavaScript
• Hvordan stopper man henrettelsen?

Timing Begivenheder

JavaScript tillader også udførelse af funktioner såvel som metoder med hensyn til tid og ikke gennemførelsestid for programmet. Dette tillader udførelse af funktionerne på det angivne tidspunkt uanset tidspunktet for programmets udførelse.

De to vigtigste metoder til at bruge Timing Events i JavaScript er:

• setTimeout (funktion, millisekund)

  
  
  

Denne funktion udfører den funktion indeni, der kun sendes som parameter en gang efter den angivne tid i millisekund.

• setInterval (funktion, millisekund)

  kok vs marionet vs jenkins

Denne funktion udfører funktionen fra udførelsestiden og efter hvert tidsinterval, der er nået. Det gentager udførelsen af ​​funktionen for hvert tidsinterval.

Lad os nu gå videre og se, hvordan SetInterval i JavaScript fungerer.

SetInterval i JavaScript

Den første parameter for denne funktion er den funktion, der skal udføres, og den anden parameter angiver tidsintervallet mellem hver udførelse.

var myVar = setInterval (myTimer, 1000) funktion myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Her får document.getElementById elementet fra som har id'et som 'demo' og d.toLocaleTimeString () -funktionen giver den aktuelle tid fra systemet.

Derfor gentages dette hver 1000 millisekund, hvilket svarer til 1 sek. Funktionen udføres således gentagne gange hvert 1. sekund, og derfor opdateres tiden hvert sekund.

Så hvordan stopper vi denne henrettelse? Lad os finde ud af det!

Hvordan stopper man henrettelsen?

Vi kan stoppe udførelsen fra funktionen setInterval () ved hjælp af en anden funktion kaldet clearInterval ().clearInterval () bruger variablen, der returneres fra funktionen setInterval ().

hvad gør bufferedreader i java

For eksempel:

myVar = setInterval (funktion, millisekunder) clearInterval (myVar)

Nedenfor er et eksempel, der bruger både setInterval () såvel som clearInterval (). Dette starter et ur og giver en knap til at stoppe tiden.

 
Nedenfor er et ur.
Stop tid 
 
Klik på knappen ovenfor for at stoppe tiden.
var myVar = setInterval (myTimer, 1000) funktion myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Produktion:

Nogle flere eksempler med setInterval () og clearInterval ().

Oprettelse af en dynamisk statuslinje

#myProgress {bredde: 100% højde: 30px position: relativ baggrundsfarve: #ddd} #myBar {baggrundsfarve: # 4CAF50 bredde: 10px højde: 30px position: absolut} 
Klik på Mig-funktion flyt () {var elem = document.getElementById ('myBar') var bredde = 0 var id = setInterval (frame, 10) funktionsramme () {if (width == 100) {clearInterval (id)} andet {width ++ elem.style.width = width + '%'}}}

Produktion:

Den oprindelige output

Output efter klik på knappen, der siger “Click Me”.

Skift mellem to baggrunde

Stop med at skifte var myVar = setInterval (setColor, 300) funktion setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'gul'? 'pink': 'yellow'} funktion stopColor () {clearInterval (myVar)}

Produktion:

Farven skiftes mellem det gule og lyserøde. Ovenstående output er før du klikker på knappen, og nedenunder er efter klik på knappen.

Med dette er vi kommet til slutningen af ​​vores SetInterval i JavaScript-artikel. Jeg håber, du forstod, hvordan SetInterval-metoden fungerer.

forskellen mellem aws og azurblå

Tjek den af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).

Har du et spørgsmål til os? Nævn det i kommentarsektionen på denne blog, så vender vi tilbage til dig.