JavaScript viene utilizzato come linguaggio di programmazione lato client e come linguaggio di programmazione lato server. Itfornisce una pletora di metodi per eseguire facilmente diverse funzionalità. Questo è ciò che ha fatto uno dei linguaggi di programmazione più popolari e anche ampiamente utilizzato in diversi tipi di sviluppo del prodotto.SetInterval in JavaScript fa parte di Timing Events in JavaScript e lo impareremo nella sequenza seguente:
Eventi di temporizzazione
JavaScript consente anche l'esecuzione di funzioni nonché metodi rispetto al tempo e non al tempo di esecuzione del programma. Ciò consente l'esecuzione delle funzioni all'ora specificata indipendentemente dall'ora di esecuzione del programma.
I due metodi chiave per utilizzare gli eventi temporali in JavaScript sono:
setTimeout (funzione, millisecondi)
tutorial di microsoft sql server per principianti
Questa funzione esegue la funzione all'interno della quale viene passata come parametro solo una volta dopo il tempo specificato in millisecondi.
setInterval (funzione, millisecondo)
Questa funzione esegue la funzione dal tempo di esecuzione e dopo ogni intervallo di tempo raggiunto. Ripete l'esecuzione della funzione ad ogni intervallo di tempo.
Ora andiamo avanti e vediamo come funziona SetInterval in JavaScript.
SetInterval in JavaScript
Il primo parametro di questa funzione è la funzione da eseguire e il secondo parametro indica l'intervallo di tempo tra ogni esecuzione.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Qui, document.getElementById ottiene l'elemento da che ha l'id come “demo” e la funzione d.toLocaleTimeString () fornisce l'ora corrente dal sistema.
Quindi, questo viene ripetuto ogni 1000 millisecondi che è equivalente a 1 sec. Pertanto, la funzione viene eseguita ripetutamente ogni secondo e quindi l'ora viene aggiornata ogni secondo.
Allora come fermiamo questa esecuzione? Scopriamolo!
Come fermare l'esecuzione?
Possiamo fermare l'esecuzione dalla funzione setInterval () con l'aiuto di un'altra funzione chiamata clearInterval ().clearInterval () utilizza la variabile restituita dalla funzione setInterval ().
Per esempio:
myVar = setInterval (function, milliseconds) clearInterval (myVar)
Di seguito è riportato un esempio che utilizza sia setInterval () che clearInterval (). Questo avvia un orologio e fornisce un pulsante per fermare il tempo.
Di seguito è riportato un orologio.
Tempo di stop
Fare clic sul pulsante in alto per fermare il tempo.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Produzione:
Alcuni altri esempi con setInterval () e clearInterval ().
Creazione di una barra di avanzamento dinamica
#myProgress {width: 100% height: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: absolute}
Funzione Click Me move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {larghezza ++ elem.style.width = larghezza + '%'}}}Produzione:
L'output iniziale
Uscita dopo il clic sul pulsante che dice 'Cliccami'.
Alterna tra due sfondi
Smetti di commutare var myVar = setInterval (setColor, 300) funzione setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'pink': 'yellow'} funzione stopColor () {clearInterval (myVar)}Produzione:
Il colore sarebbe alternato tra il giallo e il rosa. L'output sopra è prima di fare clic sul pulsante e il sotto è dopo il clic sul pulsante.
Con questo, siamo giunti alla fine del nostro articolo SetInterval in JavaScript. Spero che tu abbia capito come funziona il metodo SetInterval.
Controlla il di Edureka. La formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti Web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Hai domande per noi? Per favore menzionalo nella sezione commenti di questo blog e ti risponderemo.