Les méthodes JavaScript setInterval et setTimeout expliquées

JavaScript est un langage de programmation Web de haut niveau dans lequel chaque déclaration de code est exécutée ligne par ligne. Cependant, supposons que vous souhaitiez exécuter un code ou une fonction à un stade ultérieur (à l'avenir) et pas immédiatement. C'est ce qu'on appelle la planification d'un appel en JavaScript et peut être réalisée avec les deux méthodes intégrées; setTimeout () et setInterval ().

Ce message discute de ce setInterval () et setTimeout () Les méthodes intégrées sont en javascript. Cependant, avant d'aller plus loin, il convient de noter que ces deux méthodes ne font pas partie de la spécification JavaScript et font partie de la spécification standard HTML mais sont prises en charge dans tous les principaux navigateurs.

Quelle est la méthode setTimeout ()?

Le setTimeout () La méthode est utilisée pour exécuter un code spécifique à l'avenir et pas immédiatement en appelant une fonction de rappel après un intervalle de temps spécifique. La fonction de rappel est définie comme la fonction fournie à une autre fonction en tant qu'argument et exécutée dans la fonction extérieure ultérieurement.

Syntaxe de la méthode setTimeout ()

Le syntaxe de setTimeout () est donné ci-dessous:

setTimeout (callbackfunc, millisecondes);

Le premier argument que nous donnons au setTimeout () La méthode est la fonction de rappel qui est exécutée après les millisecondes fournies.

Exemple
Passons par un exemple où nous allons définir le setTimeout () Méthode sur un bouton et lorsque l'utilisateur clique sur ce bouton, les fonctions de rappel seront exécutées après 2 secondes:

Essayez-le

Dans la fonction de rappel, nous avons initialisé une alerte qui s'affichera après deux secondes avec le message Bonjour.

Quelle est la méthode setInterval ()?

Le setInterval () la méthode est la même que setTimeout () car il exécute également une fonction de rappel après une heure spécifique, mais à l'exception, il exécute la fonction de rappel en continu après cet intervalle de temps spécifique.

Syntaxe de la méthode setInterval ()

Le syntaxe de la setInterval () La méthode est la suivante:

setInterval (myfunc, millisecondes);

Comme setTimeout () Le premier argument est la fonction de rappel qui sera exécutée après le nombre spécifié de millisecondes et l'exécution sera répétée en continu après cette heure spécifique.

Exemple
Passons par un exemple où nous montrerons le temps du système actuel après 1 seconde.

const myfunc = () =>
const d = new Date ();
console.journal (D.tolocaletimestring ());

setInterval (MyFunc, 1000);

Dans le code ci-dessus, nous avons d'abord créé une fonction dans laquelle nous avons créé une nouvelle date à l'aide du Date L'objet et la console ont enregistré l'heure du système.

Après avoir défini la fonction, nous avons utilisé le setInterval () Méthode, a passé le nom de la fonction et 1000 millisecondes, ce qui est de 1 seconde. Maintenant, la fonction fonctionnera toutes les 1 seconde et nous verrons notre temps système sur le journal de la console après chaque seconde:

Stoppage d'exécution de setTimeout () et setInterval ()

Si vous ne voulez pas la fonction de rappel de setInterval () ou setTimeout () Pour exécuter plus, nous pouvons utiliser les méthodes d'arrêt disponibles en JavaScript pour les deux.

Méthode ClearTimeout ()
Pour arrêter l'exécution du setTimeout () fonction que nous pouvons utiliser le ClearTimeout () Méthode qui prendra une variable / ID qui est renvoyée du setTimeout () Méthode comme argument.

Exemple
Dans cet exemple, nous arrêterons l'exécution de la fonction d'appel définie avec la méthode setTimeout ():

Essayez-le
Arrêt

Le code ci-dessus indiqué est une forme étendue de l'exemple setTimeout () affiché précédemment. Dans ce code, nous avons ajouté un autre bouton avec le nom de Arrêt et invoqué la fonction stop () chaque fois qu'un utilisateur clique sur le bouton d'arrêt. La fonction stop () a cleartimeout () qui a une variable t comme argument. La variable t est simplement un ID renvoyé de la fonction setTimeout ().

Lorsqu'un utilisateur clique sur le Essayer it bouton puis après trois secondes nous voyons Bonjour dans l'alerte comme indiqué précédemment. Cependant, si l'utilisateur clique maintenant sur le bouton d'arrêt avant 3 secondes, la fonction de rappel MyFunction ne sera pas invoquée et donc nous ne verrons pas d'alerte. Ce phénomène est illustré ci-dessous:

Méthode ClearInterval ()
De même, pour arrêter l'exécution du setInterval () fonction, nous pouvons utiliser le ClearInterval () Méthode qui prendra également la variable renvoyée du setInterval () comme argument.

Exemple

Passons par un exemple où nous arrêterons l'exécution de la fonction de rappel du setInterval () méthode.

Temps d'arrêt

Dans le code ci-dessus, nous avons défini un bouton dans le HTML, puis initialisé l'événement OnClick sur ce bouton. Lorsque l'utilisateur clique sur le bouton défini, le setInterval () La méthode cessera d'exécuter.

Lorsque nous avons cliqué sur le bouton «Stop Time», le temps du système a cessé de s'afficher sur notre journal de console:

Conclusion

Le setTimeout () et setInterval () Méthodes Planifiez à la fois un appel qui doit exécuter une fonction plus tard après un nombre spécifié de millisecondes à l'exception setInterval () exécute une fonction en continu après cette heure spécifique, contrairement setTimeout () Méthode qui exécute une fonction une seule fois après l'heure spécifiée.

Dans cet article, nous avons discuté de ce que setTimeout () et setInterval () La méthode est et nous avons vu leurs exemples ainsi que des captures d'écran de la sortie. En fin de compte, nous avons également vu comment arrêter l'exécution des fonctions de rappel associées à setTimeout () et setInterval () méthodes.