Entprellen vs. Drosseln in React

Entprellen vs. Drosseln in der Reaktion

Sowohl Entprellen als auch Drosseln sind Techniken zur Steuerung der Geschwindigkeit, mit der eine Funktion ausgeführt wird. Sie werden häufig verwendet, um die Leistung bei Ereignissen wie Größenänderung, Scrollen oder Tippen zu verbessern. Hier ist eine einfache Erklärung:

---

1. Entprellen

Definition: Führt eine Funktion nach einer angegebenen Verzögerung seit ihrem letzten Aufruf aus. Wenn das Ereignis weiterhin ausgelöst wird, wird der Timer zurückgesetzt.

Anwendungsfall: Wenn Sie möchten, dass die Funktion nur einmal ausgeführt wird, nachdem der Benutzer aufgehört hat, das Ereignis auszulösen.
Beispiel: API-Aufruf, nachdem der Benutzer aufgehört hat, in ein Suchfeld einzugeben.

Codebeispiel (Debouncen in React)

import React, { useState } from „react“;

Funktionsentprellung (Funktion, Verzögerung) {
lass den Timer;
return (...args) => {
clearTimeout(timer); // Den vorherigen Timer löschen
timer = setTimeout(() => func(...args), Verzögerung); // Einen neuen Timer einstellen
};
}

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

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

zurück (
type="text"
onChange={(e) => {
setValue(e.target.value);
handleChange(e);
}}
value={value}
placeholder="Geben Sie etwas ein..."
/>
);
};

Standard-App exportieren;

Verhalten: Die Funktion (handleChange) wird erst ausgeführt, nachdem der Benutzer 1 Sekunde lang mit der Eingabe aufgehört hat.

---

1. Drosselung

Definition: Führt eine Funktion höchstens einmal in einem bestimmten Zeitintervall aus, auch wenn das Ereignis weiterhin ausgelöst wird.

Anwendungsfall: Wenn Sie möchten, dass die Funktion bei häufigen Ereignissen in einem konsistenten Intervall ausgeführt wird.
Beispiel: Protokollieren der Position der Seite beim Scrollen.

Codebeispiel (Drosselung in React)

React importieren, { useEffect } aus „react“;

Funktionsdrossel(func, limit) {
let lastFunc;
let lastTime;
return (...args) => {
const now = Date.now();
if (!lastTime || now - lastTime >= limit) {
func(...args);
lastTime = now;
} sonst {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastTime >= limit) {
func(...args);
lastTime = Date.now();
}
}, limit - (now - lastTime));
}
};
}

const App = () => {
const handleScroll = Throttle(() => {
console.log("Scroll-Ereignis protokolliert:", window.scrollY);
}, 1000);

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

zurück

Scrollen Sie auf der Seite nach unten;
};

Standard-App exportieren;

Verhalten: Die handleScroll-Funktion protokolliert die Scroll-Position höchstens einmal pro Sekunde, auch wenn das Scroll-Ereignis kontinuierlich ausgelöst wird.

---

Das obige ist der detaillierte Inhalt vonEntprellen vs. Drosseln in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!