JavaScript est utilisé comme langage de programmation côté client ainsi que comme langage de programmation côté serveur. Ilfournit une pléthore de méthodes pour plusieurs fonctionnalités à réaliser avec facilité. C'est ce qui a fait l'un des langages de programmation les plus populaires et il est également largement utilisé dans plusieurs types de développement de produits.SetInterval en JavaScript fait partie de Timing Events en JavaScript et nous en apprendrons davantage à ce sujet dans l'ordre suivant:
Événements de chronométrage
JavaScript permet également l'exécution de les fonctions ainsi que des méthodes par rapport au temps et non au temps d'exécution du programme. Cela permet l'exécution des fonctions à l'heure spécifiée indépendamment de l'heure d'exécution du programme.
Les deux méthodes clés pour utiliser les événements de minutage dans JavaScript sont:
setTimeout (fonction, milliseconde)
Cette fonction exécute la fonction à l'intérieur de laquelle est passé en paramètre une seule fois après le temps spécifié en millisecondes.
setInterval (fonction, milliseconde)
Cette fonction exécute la fonction à partir de l'heure d'exécution et après chaque intervalle de temps atteint. Il répète l'exécution de la fonction à chaque intervalle de temps.
Voyons maintenant comment fonctionne SetInterval dans JavaScript.
SetInterval en JavaScript
Le premier paramètre de cette fonction est la fonction à exécuter et le second paramètre indique l'intervalle de temps entre chaque exécution.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Ici, document.getElementById obtient l'élément de qui a l'id comme «demo» et la fonction d.toLocaleTimeString () donne l'heure actuelle du système.
Par conséquent, cela est répété toutes les 1000 millisecondes, ce qui équivaut à 1 seconde. Ainsi, la fonction est exécutée de manière répétée toutes les 1 seconde et, par conséquent, l'heure est mise à jour toutes les secondes.
Alors, comment pouvons-nous arrêter cette exécution? Découvrons-le!
Comment arrêter l'exécution?
Nous pouvons arrêter l'exécution de la fonction setInterval () à l'aide d'une autre fonction appelée clearInterval ().clearInterval () utilise la variable renvoyée par la fonction setInterval ().
Par exemple:
myVar = setInterval (fonction, millisecondes) clearInterval (myVar)
Voici un exemple qui utilise à la fois setInterval () et clearInterval (). Cela démarre une horloge et fournit un bouton pour arrêter l'heure.
Ci-dessous, une horloge.
Temps d'arrêt
Cliquez sur le bouton ci-dessus pour arrêter l'heure.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Production:
Quelques exemples supplémentaires avec setInterval () et clearInterval ().
Créer une barre de progression dynamique
#myProgress {largeur: 100% hauteur: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 largeur: 10px hauteur: 30px position: absolue}
Click Me function 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 + '%'}}}Production:
La sortie initiale
Sortie après le clic sur le bouton qui dit 'Click Me'.
fusion de données dans le tableau 10
Basculer entre deux arrière-plans
Arrêter de basculer var myVar = setInterval (setColor, 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'jaune'? 'pink': 'yellow'} function stopColor () {clearInterval (myVar)}Production:
La couleur serait basculée entre le jaune et le rose. La sortie ci-dessus est avant de cliquer sur le bouton et celle ci-dessous est après le clic sur le bouton.
Avec cela, nous sommes arrivés à la fin de notre article SetInterval in JavaScript. J'espère que vous avez compris comment fonctionne la méthode SetInterval.
Vérifiez par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de ce blog et nous vous recontacterons.