DE
React - verzögerter Rückruf - Zustand zurücksetzen
3 points
In diesem kurzen Artikel wird gezeigt, wie man eine Rückruf-Funktion (callback) schreiben kann, die erst nach Ablauf einer bestimmten Zeit aufgerufen wird.
Die Hauptidee des folgenden Codes ist es, die Anzahl der Aufrufe von callback-Funktionen zu reduzieren, indem der vorherige Aufruf abgebrochen wird, wenn ein neues handleClick-Ereignis auftritt.
Schnelle Lösung:
xxxxxxxxxx1
// import React from 'react';2
// import ReactDOM from 'react-dom';3
4
const useDelayedCallback = (delay = 100) => {5
const ref = React.useRef();6
React.useEffect(() => {7
// Bereinigung eines ungerufenen Anrufs8
return () => {9
if (ref.current) clearTimeout(ref.current);10
};11
}, []);12
return (callback) => {13
if (ref.current) clearTimeout(ref.current);14
ref.current = setTimeout(callback, delay);15
};16
};17
18
// Verwendungsbeispiel19
20
const App = () => {21
const delayCallback = useDelayedCallback(500); // max. 1 Anruf pro 500ms22
const handleClick = () => {23
delayCallback(() => console.log('Die Schaltfläche wurde angeklickt!'));24
};25
return (26
<button onClick={handleClick}>Mehrmals anklicken!</button>27
);28
};29
30
const root = document.querySelector('#root');31
ReactDOM.render(<App/>, root );Wenn der Klickvorgang abgeschlossen ist, erscheint auf dem Bildschirm eine Warnmeldung mit dem Titel Die Schaltfläche wurde angeklickt!. Wenn man in einem kurzen Zeitraum mehrmals auf die Schaltfläche klickt, wird nur ein Klick-Ereignis auftreten - die Anzahl der Aufrufe wird reduziert.
