La limitation et l'anti-rebond sont des techniques utilisées pour optimiser les performances des applications Web en limitant le nombre d'exécutions d'une fonction sur une période donnée.

Étranglement

La limitation limite la vitesse à laquelle une fonction est exécutée. Cela signifie que la fonction ne peut être appelée qu'une seule fois pendant un intervalle de temps spécifié, quel que soit le nombre de fois où elle est déclenchée. La limitation est utile pour les fonctions qui sont déclenchées fréquemment, telles que celles attachées aux événements de défilement ou de redimensionnement.

Voici un exemple d'implémentation d'une fonction de manette :

Dans cette implémentation, la throttlefonction prend deux paramètres : la fonction à étrangler et le délai entre chaque exécution de la fonction. La fonction renvoie une nouvelle fonction qui peut être appelée à la place de la fonction d'origine.

La lastCallvariable stocke l'horodatage de la dernière exécution de la fonction limitée. Si l'horodatage actuel moins l'horodatage du dernier appel est inférieur au délai, la fonction ne fait rien et revient. Sinon, la fonction exécute la fonction d'origine et met à jour la lastCallvariable avec l'horodatage actuel.

Voici un exemple d'utilisation de la throttlefonction :

Dans cet exemple, la throttlefonction est utilisée pour limiter une fonction qui est appelée lorsque la fenêtre est redimensionnée. La fonction ne sera appelée qu'une fois toutes les 1000 ms (1 seconde), même si la fenêtre est redimensionnée plusieurs fois dans cet intervalle.

Anti-rebond

L'anti-rebond, en revanche, retarde l'exécution d'une fonction jusqu'à ce qu'un certain laps de temps se soit écoulé depuis le dernier appel de la fonction. Cela signifie que si la fonction est déclenchée plusieurs fois dans l'intervalle de temps spécifié, elle ne sera exécutée qu'une fois après l'expiration de l'intervalle de temps spécifié. L'anti-rebond est utile pour les fonctions qui sont déclenchées par des événements qui peuvent se déclencher rapidement, comme des frappes au clavier.

Voici un exemple d'implémentation d'une fonction anti-rebond :

Dans cette implémentation, la debouncefonction prend deux paramètres : la fonction à anti-rebondir, et le délai entre chaque exécution de la fonction. La fonction renvoie une nouvelle fonction qui peut être appelée à la place de la fonction d'origine.

La timervariable stocke l'ID de temporisateur pour la fonction setTimeout, qui est utilisée pour retarder l'exécution de la fonction. Si la fonction anti-rebond est appelée à nouveau dans l'intervalle de temps spécifié, la clearTimeoutfonction est appelée pour annuler la minuterie et une nouvelle minuterie est définie. Le nouveau temporisateur n'exécutera la fonction qu'une fois l'intervalle de temps spécifié écoulé depuis le dernier appel de la fonction.

Voici un exemple d'utilisation de la debouncefonction :

Dans cet exemple, la debouncefonction est utilisée pour faire rebondir une fonction qui est appelée lorsqu'une touche est relâchée. La fonction ne sera appelée qu'une seule fois après que l'utilisateur aura cessé de taper pendant 1000 ms (1 seconde), même s'il a appuyé sur plusieurs touches dans cet intervalle.

Dans l'ensemble, l'accélération et l'anti-rebond peuvent être des techniques utiles pour optimiser les performances des applications Web en contrôlant la fréquence d'exécution des fonctions. En utilisant ces techniques, nous pouvons réduire la charge sur le navigateur et améliorer l'expérience utilisateur.

J'espère que ça aide!