Anti-rebond vs limitation dans React

Anti-rebond vs limitation dans React

L'anti-rebond et la limitation sont des techniques permettant de contrôler la vitesse à laquelle une fonction est exécutée, souvent utilisées pour améliorer les performances lors du traitement d'événements tels que le redimensionnement, le défilement ou la saisie. Voici une explication simple :

---

1. Anti-rebond

Définition : exécute une fonction après un délai spécifié à compter de la dernière fois qu'elle a été invoquée. Si l'événement continue de se déclencher, la minuterie se réinitialise.

Cas d'utilisation : lorsque vous souhaitez que la fonction ne s'exécute qu'une seule fois après que l'utilisateur cesse de déclencher l'événement.
Exemple : appel d'API après que l'utilisateur arrête de taper dans un champ de recherche.

Exemple de code (anti-rebond dans React)

importer React, { useState } depuis "react" ;

fonction anti-rebond(func, delay) {
laisser la minuterie ;
return (...args) => {
clearTimeout (minuterie); // Efface le minuteur précédent
timer = setTimeout(() => func(...args), delay); // Définir une nouvelle minuterie
};
>

const App = () => {
const [valeur, setValue] = useState("");

const handleChange = debounce((e) => {
console.log("Appel API pour :", e.target.value);
}, 1000);

retour (
type="texte"
onChange={(e) => {
setValue(e.target.value);
handleChange(e);
}>
valeur={valeur>
placeholder="Tapez quelque chose..."
/>
);
};

exporter l'application par défaut ;

Comportement : la fonction (handleChange) s'exécute uniquement après que l'utilisateur arrête de taper pendant 1 seconde.

---

1. Limitation

Définition : exécute une fonction au plus une fois dans un intervalle de temps spécifié, même si l'événement continue de se déclencher.

Cas d'utilisation : lorsque vous souhaitez que la fonction s'exécute à un intervalle constant lors d'événements fréquents.
Exemple : Enregistrement de la position de la page lors du défilement.

Exemple de code (limitation dans React)

importer React, {useEffect } depuis "react" ;

fonction accélérateur (func, limite) {
laissez lastFunc;
laisser lastTime ;
return (...args) => {
const maintenant = Date.now();
if (!lastTime || now - lastTime >= limite) {
func(...args);
lastTime = maintenant ;
} autre {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastTime >= limite) {
func(...args);
lastTime = Date.now();
>
}, limite - (maintenant - lastTime));
>
};
>

const App = () => {
const handleScroll = throttle(() => {
console.log("Événement de défilement enregistré :", window.scrollY);
}, 1000);

useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

retour

Faites défiler la page ;
} ;

exporter l'application par défaut ;

Comportement : la fonction handleScroll enregistre la position de défilement au maximum une fois par seconde, même si l'événement de défilement se déclenche en continu.

---

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!