Comprendre `setTimeout` et `setInterval` en JavaScript

JavaScript propose plusieurs façons de gérer les événements de synchronisation, et deux des méthodes les plus couramment utilisées sont setTimeout et setInterval. Ces fonctions vous permettent de planifier l'exécution de code après une durée spécifiée ou de manière répétée à intervalles réguliers. Dans cet article, nous explorerons le fonctionnement de ces fonctions et fournirons des exemples pratiques pour illustrer leur utilisation.

setTimeout

La fonction setTimeout est utilisée pour exécuter une fonction ou un morceau de code une fois après un délai spécifié. La syntaxe de setTimeout est la suivante :

setTimeout(function, delay, [arg1, arg2, ...]);

• function : La fonction ou le code à exécuter.
• delay : Le temps en millisecondes à attendre avant d'exécuter la fonction.
• [arg1, arg2, ...] : Arguments facultatifs à transmettre à la fonction lors de son exécution.

Exemple 1 : utilisation de base

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

setTimeout(sayHello, 2000); // Outputs "Hello, World!" after 2 seconds

Dans cet exemple, la fonction sayHello est exécutée une fois après un délai de 2 secondes.

Exemple 2 : Passer des arguments

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setTimeout(greet, 2000, 'Alice'); // Outputs "Hello, Alice!" after 2 seconds

Ici, nous passons l'argument 'Alice' à la fonction greet, qui est exécutée après un délai de 2 secondes.

Exemple 3 : Utilisation de fonctions anonymes

setTimeout(function() {
  console.log('This is an anonymous function!');
}, 3000); // Outputs "This is an anonymous function!" after 3 seconds

Vous pouvez également utiliser des fonctions anonymes directement dans setTimeout.

définirIntervalle

La fonction setInterval est utilisée pour exécuter une fonction ou un morceau de code à plusieurs reprises à des intervalles spécifiés. La syntaxe de setInterval est similaire à setTimeout :

setInterval(function, interval, [arg1, arg2, ...]);

• function : La fonction ou le code à exécuter.
• intervalle : le temps en millisecondes entre chaque exécution.
• [arg1, arg2, ...] : Arguments facultatifs à transmettre à la fonction à chaque fois qu'elle est exécutée.

Exemple 1 : utilisation de base

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

setInterval(sayHello, 1000); // Outputs "Hello, World!" every 1 second

Dans cet exemple, la fonction sayHello est exécutée toutes les secondes.

Exemple 2 : Passer des arguments

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setInterval(greet, 1000, 'Alice'); // Outputs "Hello, Alice!" every 1 second

Ici, nous passons l'argument 'Alice' à la fonction greet, qui est exécutée toutes les secondes.

Exemple 3 : Utilisation de fonctions anonymes

setInterval(function() {
  console.log('This is an anonymous function!');
}, 2000); // Outputs "This is an anonymous function!" every 2 seconds

Vous pouvez également utiliser des fonctions anonymes directement dans setInterval.

Effacement des minuteries

setTimeout et setInterval renvoient tous deux un ID de minuterie, qui peut être utilisé pour effacer les minuteries si nécessaire. Cela se fait en utilisant respectivement les fonctions clearTimeout et clearInterval.

Exemple : Effacement de setTimeout

const timeoutId = setTimeout(function() {
  console.log('This will not run.');
}, 5000);

clearTimeout(timeoutId); // Cancels the timeout

Exemple : Effacement de setInterval

const intervalId = setInterval(function() {
  console.log('This will run only once.');
}, 1000);

setTimeout(function() {
  clearInterval(intervalId); // Stops the interval after 3 seconds
}, 3000);

Dans cet exemple, la fonction clearInterval est appelée après 3 secondes, arrêtant l'exécution répétée de la fonction.

Cas d'utilisation pratiques

1. Anti-rebond avec setTimeout

L'anti-rebond est une technique permettant de limiter la vitesse à laquelle une fonction est exécutée. Par exemple, vous pouvez utiliser setTimeout pour empêcher le rebond d'un champ de saisie de recherche :

let timeoutId;

function debounceSearch(query) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    // Perform search operation
    console.log('Searching for:', query);
  }, 300);
}

document.getElementById('searchInput').addEventListener('input', function(event) {
  debounceSearch(event.target.value);
});

2. Création d'une minuterie simple avec setInterval

let seconds = 0;

function updateTimer() {
  seconds++;
  console.log('Timer:', seconds);
}

const timerId = setInterval(updateTimer, 1000);

// Stop the timer after 10 seconds
setTimeout(function() {
  clearInterval(timerId);
  console.log('Timer stopped');
}, 10000);

Conclusion

Comprendre setTimeout et setInterval est essentiel pour gérer les actions chronométrées et répétées en JavaScript. Ces fonctions vous permettent de gérer des tâches telles que l'anti-rebond des entrées utilisateur, la création de minuteries et l'exécution de mises à jour périodiques. En maîtrisant ces outils, vous pouvez créer des applications Web plus réactives et efficaces.

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!