JavaScript s’utilitza com a llenguatge de programació del client i del servidor. Aixòproporciona una gran quantitat de mètodes per realitzar diverses funcionalitats amb facilitat. Això és el que va fer un dels llenguatges de programació més populars, així com també s’utilitza àmpliament en diversos tipus de desenvolupament de productes.SetInterval a JavaScript forma part de Timing Events in JavaScript i en coneixerem la següent seqüència:
Esdeveniments temporals
JavaScript també permet l'execució de funcions així com mètodes pel que fa al temps i no al temps d'execució del programa. Això permet l'execució de les funcions en el moment especificat independentment del moment d'execució del programa.
Els dos mètodes clau per utilitzar els esdeveniments temporals a JavaScript són:
setTimeout (funció, mil·lisegon)
Aquesta funció executa la funció dins de la qual es passa com a paràmetre només una vegada després del temps especificat en mil·lisegons.
setInterval (funció, mil·lisegon)
Aquesta funció executa la funció a partir del temps d'execució i després de cada interval de temps assolit. Repeteix l'execució de la funció a cada interval de temps.
Ara anem a continuar i veurem com funciona SetInterval a JavaScript.
SetInterval a JavaScript
El primer paràmetre d'aquesta funció és la funció que cal executar i el segon paràmetre indica l'interval de temps entre cada execució.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Aquí, document.getElementById obté l'element que té l'identificador com a 'demostració' i la funció d.toLocaleTimeString () dóna l'hora actual del sistema.
mostra com combinar dades
Per tant, això es repeteix cada 1.000 mil·lisegons, que equival a 1 segon. Per tant, la funció s’executa repetidament cada 1 segon i, per tant, s’actualitza el temps cada segon.
Llavors, com aturem aquesta execució? Anem a esbrinar!
Com aturar l'execució?
Podem aturar l'execució des de la funció setInterval () amb l'ajuda d'una altra funció anomenada clearInterval ().clearInterval () utilitza la variable retornada de la funció setInterval ().
Per exemple:
myVar = setInterval (funció, mil·lisegons) clearInterval (myVar)
A continuació es mostra un exemple que utilitza tant setInterval () com clearInterval (). Això engega un rellotge i proporciona un botó per aturar l'hora.
A sota hi ha un rellotge.
Parar el temps
Feu clic al botó superior per aturar l'hora.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Sortida:
Alguns exemples més amb setInterval () i clearInterval ().
Creació d’una barra de progrés dinàmica
#myProgress {width: 100% height: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: absolute}
Feu clic a Me funció move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}Sortida:
La sortida inicial
Sortiu després de fer clic al botó que diu 'Feu-me clic'.
Canvia entre dos fons
Deixa de canviar var myVar = setInterval (setColor, 300) funció setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'groc'? 'rosa': 'groc'} funció stopColor () {clearInterval (myVar)}Sortida:
com escriure classe de singleton a Java
El color es commutaria entre el groc i el rosa. La sortida anterior es fa abans de fer clic al botó i la següent és després del clic al botó.
Amb això, hem arribat al final del nostre article SetInterval a JavaScript. Espero que hagueu entès com funciona el mètode SetInterval.
Consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).
Tens alguna pregunta? Si us plau, mencioneu-ho a la secció de comentaris d’aquest bloc i us respondrem.