Wat is SetInterval in JavaScript en hoe werkt het?

JavaScript wordt gebruikt als programmeertaal aan de clientzijde en als programmeertaal aan de serverzijde. Hetbiedt een overvloed aan methoden voor verschillende functionaliteiten die gemakkelijk kunnen worden uitgevoerd. Dit is wat gemaakt een van de meest populaire programmeertalen en wordt ook op grote schaal gebruikt in verschillende soorten productontwikkeling.SetInterval in JavaScript is een onderdeel van Timing Events in JavaScript en we zullen er in de volgende volgorde over leren:

• Timing-evenementen
• SetInterval in JavaScript
• Hoe de executie te stoppen?

Timing-evenementen

JavaScript maakt ook de uitvoering van functies evenals methoden met betrekking tot de tijd en niet de uitvoeringstijd van het programma. Hierdoor kunnen de functies op het opgegeven tijdstip worden uitgevoerd, ongeacht het tijdstip van uitvoering van het programma.

De twee belangrijkste methoden om de timinggebeurtenissen in JavaScript te gebruiken zijn:

het maken van een object-array in java

• setTimeout (functie, milliseconde)

  
  
  

Deze functie voert de functie binnen die als parameter wordt doorgegeven slechts één keer uit na de opgegeven tijd in milliseconden.

• setInterval (functie, milliseconde)

Deze functie voert de functie uit vanaf de uitvoeringstijd en na elk bereikt tijdsinterval. Het herhaalt de functie-uitvoering op elk tijdsinterval.

Laten we nu verder gaan en kijken hoe SetInterval in JavaScript werkt.

SetInterval in JavaScript

De eerste parameter van deze functie is de functie die moet worden uitgevoerd en de tweede parameter geeft het tijdsinterval aan tussen elke uitvoering.

var myVar = setInterval (myTimer, 1000) functie myTimer () {var d = nieuwe datum () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Hier haalt document.getElementById het element op van die de id heeft als 'demo' en d.toLocaleTimeString () functie geven de huidige tijd van het systeem.

Daarom wordt dit elke 1000 milliseconde herhaald, wat overeenkomt met 1 seconde. De functie wordt dus elke seconde herhaaldelijk uitgevoerd en daarom wordt de tijd elke seconde bijgewerkt.

Dus hoe stoppen we deze executie? Laten wij het uitzoeken!

Hoe de executie te stoppen?

We kunnen de uitvoering van de functie setInterval () stoppen met behulp van een andere functie genaamd clearInterval ().clearInterval () gebruikt de variabele die wordt geretourneerd door de functie setInterval ().

Bijvoorbeeld:

myVar = setInterval (functie, milliseconden) clearInterval (myVar)

Hieronder ziet u een voorbeeld dat zowel setInterval () als clearInterval () gebruikt. Dit start een klok en biedt een knop om de tijd te stoppen.

 
Hieronder is een klok.
Stoptijd 
 
Klik op de knop hierboven om de tijd te stoppen.
hoeveel gereserveerde woorden in java
var myVar = setInterval (myTimer, 1000) functie myTimer () {var d = nieuwe datum () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Uitgang:

Nog enkele voorbeelden met setInterval () en clearInterval ().

Een dynamische voortgangsbalk maken

#myProgress {width: 100% hoogte: 30px positie: relatieve achtergrondkleur: #ddd} #myBar {achtergrondkleur: # 4CAF50 breedte: 10px hoogte: 30px positie: absoluut} 
Click Me-functie move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} anders {width ++ elem.style.width = width + '%'}}}

Uitgang:

De eerste output

Uitvoer na het klikken op de knop met de tekst 'Click Me'.

Schakel tussen twee achtergrond

Stoppen met wisselen var myVar = setInterval (setColor, 300) functie setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'geel'? 'pink': 'yellow'} functie stopColor () {clearInterval (myVar)}

Uitgang:

De kleur zou worden omgeschakeld tussen geel en roze. De bovenstaande output is voor het klikken op de knop en de onderstaande is na het klikken op de knop.

Hiermee zijn we aan het einde gekomen van ons SetInterval in JavaScript-artikel. Ik hoop dat je hebt begrepen hoe de SetInterval-methode werkt.

Bekijk de door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).

Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van deze blog en we nemen zo snel mogelijk contact met je op.

hoe om te gaan met pop-up in selenium webdriver