Dboun

La fonction dboun est un utilitaire conçu pour limiter la vitesse à laquelle une fonction est exécutée. Il garantit que la fonction fournie (fn) est appelée uniquement après qu'un délai spécifié (délai) se soit écoulé depuis le dernier appel. Par défaut, le délai est fixé à 400 millisecondes.

Ceci est particulièrement utile pour gérer les événements qui se déclenchent fréquemment, tels que le redimensionnement, le défilement ou la saisie, en empêchant la fonction fournie d'être appelée de manière excessive.

Exemple d'utilisation

Scénario : Rechercher une entrée avec anti-rebond

// Define the function to handle search
function handleSearch(query: string): void {
    console.log("Searching for:", query);
}

// Create a debounced version of the search handler
const debouncedSearch = dboun(handleSearch, 300);

// Simulate typing in a search box
const input = document.querySelector('#searchBox');
input?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    debouncedSearch(target.value);
});

Dans cet exemple :

• handleSearch est la fonction qui gère la logique de recherche.
• debouncedSearch garantit que handleSearch n'est exécuté qu'après 300 millisecondes d'inactivité lors de la saisie.

Paramètres

1. fn (Fonction) : La fonction à exécuter après le délai anti-rebond.

   • Il s'agit de la fonction de rappel qui sera invoquée après le délai spécifié.

2. délai (Nombre, facultatif) : Le nombre de millisecondes à attendre avant d'appeler fn. La valeur par défaut est 400 millisecondes.

   • Cela détermine l'intervalle anti-rebond.

Retours

La fonction dboun renvoie une nouvelle version anti-rebond de fn. La fonction renvoyée retarde l'invocation de fn jusqu'à ce que le délai se soit écoulé en millisecondes depuis le dernier appel de la fonction renvoyée.

Comment ça marche

• Lorsque la fonction renvoyée est appelée, elle efface toute minuterie existante définie pour la fonction (clearTimeout(timeout)).
• Une nouvelle minuterie est ensuite définie (setTimeout) pour appeler fn après le délai spécifié.
• Si la fonction renvoyée est à nouveau appelée avant la fin de la période de retard, la minuterie précédente est effacée et réinitialisée.

Applications pratiques

1. Gestion des entrées : l'anti-rebond empêche l'exécution excessive des gestionnaires d'événements lorsque les utilisateurs saisissent dans un champ de saisie.
2. Redimensionner les événements : gérez les performances en anti-rebondissant les gestionnaires d'événements de redimensionnement de la fenêtre.
3. Événements de défilement : évitez les goulots d'étranglement des performances en contrôlant la fréquence d'exécution des gestionnaires d'événements de défilement.

Remarques

• Si vous avez besoin d'une exécution immédiate suivie d'un délai (comportement semblable à celui d'un accélérateur), cette fonction ne fournit pas cette fonctionnalité prête à l'emploi.
• Assurez-vous toujours que le délai est approprié au cas d'utilisation afin d'équilibrer la réactivité et les performances.

Compatibilité du navigateur

La fonction dboun utilise des fonctionnalités JavaScript/TypeScript modernes, ce qui la rend compatible avec la plupart des environnements modernes. Pour les environnements plus anciens, envisagez de transpiler le code.

Essai

// Test debounced function
const log = dboun((message: string) => console.log(message), 500);
log("Hello"); // Will not log immediately
log("Hello again"); // Resets the timer; only this message will log after 500ms

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!