Languages
[Edit]
DE

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

3 points
Created by:
Nikki
9950

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