Comment la fonction anti-rebond de JavaScript optimise-t-elle les performances en retardant l'exécution de la fonction ?

Fonction anti-rebond de JavaScript : un guide complet

Comprendre la fonction « anti-rebond » en JavaScript peut être déroutant. Essentiellement, il retarde l’exécution d’une fonction jusqu’à ce qu’un laps de temps spécifié se soit écoulé depuis le dernier appel. Cette technique est couramment utilisée pour optimiser les performances et éviter les tâches inutiles.

Comment ça marche

La fonction anti-rebond dans l'extrait de code fourni fonctionne comme suit :

1. Minuteur privé : Il maintient une variable de délai d'attente qui sert de paramètre interne timer.
2. Fonction de retour : Debounce renvoie une nouvelle fonction anonyme qui capture le contexte et les arguments de la fonction d'origine mais introduit un délai.
3. Mode immédiat : Si le mode immédiat est activé (immédiat est vrai), la fonction est exécutée immédiatement si aucun délai d'attente n'est actif.
4. Delay Timer : Si le délai d'attente est actif, il est effacé. Cela annule toute exécution en attente et réinitialise le minuteur. Un nouveau délai d'attente est alors défini avec le délai spécifié (attendre).
5. Exécution : Pendant la période de délai, si la fonction est à nouveau appelée, la minuterie se réinitialise. Une fois le délai expiré, la fonction est exécutée avec les arguments et le contexte capturés au moment de l'invocation.
6. Exécution en mode immédiat : Si le mode immédiat est vrai et qu'aucun délai d'attente n'est actif, la fonction est exécuté immédiatement après l'exécution de la fonction de retour appelé.

Exemple

Considérez l'exemple d'extrait de code dans lequel les mouvements de la souris sont anti-rebond avec un délai de 50 ms. Lorsque la souris est déplacée, la console est effacée et les coordonnées X et Y du curseur sont enregistrées. Sans rebond, cela entraînerait de nombreux appels inutiles à la fonction console.log, ralentissant potentiellement les performances.

function onMouseMove(e){
  console.clear();
  console.log(e.x, e.y);
}

// Define the debounced function
var debouncedMouseMove = debounce(onMouseMove, 50);

// Call the debounced function on every mouse move
window.addEventListener('mousemove', debouncedMouseMove);

Dans cet exemple, la fonction anti-rebond optimise l'activité de la console en exécutant uniquement les opérations d'effacement et de journalisation. après un délai de 50 ms depuis le dernier mouvement de la souris.

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!