Languages
[Edit]
DE

React - verzögerter Rückruf - Zustand zurücksetzen

3 points
Created by:
Nikki
10100

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:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const useDelayedCallback = (delay = 100) => {
    const ref = React.useRef();
    React.useEffect(() => {
        // Bereinigung eines ungerufenen Anrufs
        return () => {
          	if (ref.current) clearTimeout(ref.current);
        };
    }, []);
    return (callback) => {
        if (ref.current) clearTimeout(ref.current);
        ref.current = setTimeout(callback, delay);
    };
};

// Verwendungsbeispiel

const App = () => {
    const delayCallback = useDelayedCallback(500); // max. 1 Anruf pro 500ms
    const handleClick = () => {
      	delayCallback(() => console.log('Die SchaltflÀche wurde angeklickt!'));
    };
    return (
      <button onClick={handleClick}>Mehrmals anklicken!</button>
    );
};

const root = document.querySelector('#root');
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.

ReactJS (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join