Wie kann ich ein Debounce durchführen?

Question

Wie führen Sie eine Verzögerung in React durch?

Ich möchte die Funktion handleOnChange verzögern.

Ich habe es mit debounce(this.handleOnChange, 200) versucht, aber es funktioniert nicht.

function debounce(fn, delay) {
  var timer = null;
  return function() {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

var SearchBox = React.createClass({
  render: function() {
    return ;
  },

  handleOnChange: function(event) {
    // Führen Sie Ajax-Aufruf durch
  }
});

Answer 1

Versuchen Sie es:

function debounce(fn, delay) {
  var timer = null;
  return function() {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

var SearchBox = React.createClass({
  render: function() {
    return ;
  },

  handleOnChange: function(event) {
    debounce(\\ Ihr handleChange-Code , 200);
  }
});

Answer 2

Haken:

import {useState} from "react";

const useDebounce = ({defaultTimeout = 250, defaultIdentifier = 'default'} = {}) => {

    const [identifiers, setIdentifiers] = useState({[defaultIdentifier]: null});

    return ({fn = null, identifier = defaultIdentifier, timeout = defaultTimeout} = {}) => {
        if (identifiers.hasOwnProperty(identifier)) clearTimeout(identifiers[identifier]);
        setIdentifiers({...identifiers, [identifier]: setTimeout(fn, timeout)});
    };
};

export default useDebounce;

Und verwenden Sie es überall (im selben Datei identifier verwenden, um gleichzeitige Ausführung zu verhindern) wie:

const debounce = useDebounce();

const handlerA = () => {
    debounce({fn: () => console.log('nach 2000ms des letzten Aufrufs mit Bezeichner A'), identifier: 'A', timeout: 2000});
};

const handlerB = () => {
    debounce({fn: () => console.log('nach 1500ms des letzten Aufrufs mit Bezeichner B'), identifier: 'B', timeout: 1500});
};

Answer 3

Statt das handleOnChange in eine debounce() zu wickeln, wickeln Sie den Ajax-Aufruf in die Callback-Funktion innerhalb des debounce, um das Event-Objekt nicht zu zerstören.

Also etwas Ähnliches wie folgt:

handleOnChange: function (event) {
   debounce(
     $.ajax({})
  , 250);
}

Answer 4

Hier ist ein Beispiel, das ich entwickelt habe, das eine andere Klasse mit einem Debouncer umhüllt. Dies eignet sich gut, um als Dekorator/Höherordnungsfunktion erstellt zu werden:

export class DebouncedThingy extends React.Component {
    static ToDebounce = ['someProp', 'someProp2'];
    constructor(props) {
        super(props);
        this.state = {};
    }
    // Wenn eine Eigenschaft vielleicht geändert wird
    componentWillReceiveProps = (nextProps) => {
        this.debouncedSetState();
    };
    // Vor dem initialen Rendern
    componentWillMount = () => {
        // Zustand setzen und dann ab hier debouncen (eventuell _.throttle verwenden)
        this.debouncedSetState();
        this.debouncedSetState = _.debounce(this.debouncedSetState, 300);
    };
    debouncedSetState = () => {
        this.setState(_.pick(this.props, DebouncedThingy.ToDebounce));
    };
    render() {
        const restOfProps = _.omit(this.props, DebouncedThingy.ToDebounce);
        return 
    }
}

Answer 5

Hier ist ein Snippet, das den Ansatz von @Abra verwendet, der in einer Funktionskomponente verpackt ist (wir verwenden Fabric für die UI, ersetzen Sie es einfach durch einen einfachen Button)

import React, { useCallback } from "react";
import { debounce } from "lodash";

import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';

const debounceTimeInMS = 2000;

export const PrimaryButtonDebounced = (props) => {

    const debouncedOnClick = debounce(props.onClick, debounceTimeInMS, { leading: true });

    const clickHandlerDebounced = useCallback((e, value) => {

        debouncedOnClick(e, value);

    },[]);

    const onClick = (e, value) => {

        clickHandlerDebounced(e, value);
    };

    return (

    );
}