Explication détaillée de deux méthodes de retard JS courantes

En JavaScript, nous devons souvent effectuer des opérations de retard pour réaliser certaines fonctions spécifiques. Par exemple, lors de l'affichage d'animations sur des pages Web ou de l'exécution de requêtes asynchrones, nous devons contrôler le temps d'exécution de JS. Cet article présentera deux méthodes de retard JS courantes, notamment les fonctions setTimeout et setInterval.

1. Fonction setTimeout

L'utilisation de la fonction setTimeout peut exécuter une fonction ou un fragment de code après une certaine période de temps. Cette fonction reçoit deux paramètres Le premier paramètre est la fonction ou le fragment de code à exécuter, et le deuxième paramètre est le temps de retard en millisecondes. Par exemple :

setTimeout(function() {
    console.log('Hello World!');
}, 1000);

Le code ci-dessus signifie afficher "Hello World!" sur la console après 1 seconde. On peut aussi l'écrire sous la forme d'une fonction flèche :

setTimeout(() => console.log('Hello World!'), 1000);

Si vous souhaitez annuler une opération setTimeout avant la fin du délai, vous pouvez utiliser la fonction clearTimeout. Cette fonction reçoit un identifiant unique de setTimeout en paramètre.

let timeoutId = setTimeout(() => console.log('Hello World!'), 1000);
clearTimeout(timeoutId);

Dans le code ci-dessus, nous créons d'abord une opération retardée via la fonction setTimeout, stockons son identifiant dans la variable timeoutId, puis effaçons immédiatement l'opération retardée.

2. Fonction setInterval

La fonction setInterval est similaire à la fonction setTimeout et est également utilisée pour implémenter des délais de fonctionnement. La différence est que la fonction setInterval bouclera et exécutera une fonction ou un fragment de code spécifié à intervalles réguliers jusqu'à son arrêt. Cette fonction reçoit deux paramètres, le premier paramètre est la fonction ou le fragment de code à exécuter, et le deuxième paramètre est le temps entre deux exécutions, en millisecondes. Par exemple :

setInterval(function() {
    console.log('I am running!');
}, 1000);

Le code ci-dessus signifie afficher « Je cours ! » toutes les secondes.

Si vous devez empêcher la boucle setInterval d'exécuter une fonction, vous pouvez utiliser la fonction clearInterval, qui reçoit un identifiant unique de setInterval en tant que paramètre.

let intervalId = setInterval(() => console.log('I am running!'), 1000);
clearInterval(intervalId);

Dans le code ci-dessus, nous créons d'abord l'opération effectuée par la boucle via la fonction setInterval, stockons son identifiant dans la variable intervalId, puis arrêtons l'opération immédiatement.

Résumé

Les fonctions setTimeout et setInterval sont très courantes dans le développement front-end, grâce auxquelles les programmes JS peuvent être contrôlés et planifiés avec plus de précision. Lors d'une implémentation spécifique, vous devez faire attention au paramétrage et à l'annulation des opérations à l'aide de la fonction clearTimeout ou clearInterval pour éviter des résultats inattendus. J'espère que cet article pourra être utile aux débutants en JS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!