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

Wenn Sie Redux verwenden, können Sie dies auf sehr elegante Weise mit Middleware tun. Sie können ein Debounce Middleware definieren als:

var timeout;
export default store => next => action => {
  const { meta = {} } = action;
  if(meta.debounce){
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      next(action)
    }, meta.debounce)
  }else{
    next(action)
  }
}

Sie können dann das Entprellen zu Aktionserstellern hinzufügen, wie zum Beispiel:

export default debouncedAction = (payload) => ({
  type : 'DEBOUNCED_ACTION',
  payload : payload,
  meta : {debounce : 300}
}

Es gibt tatsächlich schon Middleware, die Sie von npm erhalten können, um dies für Sie zu erledigen.

Answer 2

Viele gute Informationen sind bereits hier, aber um prägnant zu sein. Das funktioniert für mich...

import React, {Component} from 'react';
import _ from 'lodash';

class MyComponent extends Component {
      constructor(props) {
        super(props);
        this.handleChange = _.debounce(this.handleChange.bind(this),700);
      };

Answer 3

Verwendung von ES6 CLASS, React 15.x.x, und lodash.debounce. Ich verwende die refs von React hier, da das Ereignis intern dieses Bind verliert.

class UserInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: ""
    };
    this.updateInput = _.debounce(this.updateInput, 500);
  }

  updateInput(userInput) {
    this.setState({
      userInput
    });
    //OrderActions.updateValue(userInput);//do some server stuff
  }

  render() {
    return ( 
       Benutzer hat eingegeben: {
        this.state.userInput
      } 
       this.updateInput(this.refs.userValue.value) } type = "text" / >

    );
  }
}

ReactDOM.render( <
  UserInput / > ,
  document.getElementById('root')
);

Answer 4

Sie können die Lodash-Debounce-Methode verwenden. Es ist einfach und effektiv.

import * as lodash from lodash;

const update = (input) => {
    // Hier den Input aktualisieren.
    console.log(`Input ${input}`);
}

const debounceHandleUpdate = lodash.debounce((input) => update(input), 200, {maxWait: 200});

doHandleChange() {
   debounceHandleUpdate(input);
}

Sie können die Debounce-Methode auch abbrechen, indem Sie die folgende Methode verwenden.

this.debounceHandleUpdate.cancel();

Answer 5

FYI

Hier ist eine weitere PoC Implementierung:

• ohne Verwendung von Bibliotheken (z.B. Lodash) für das Debouncing

• mit der React hooks API

  import React, { useState, useEffect, ChangeEvent } from 'react';

  export default function DebouncedSearchBox({ inputType, handleSearch, placeholder, debounceInterval, }: { inputType?: string; handleSearch: (q: string) => void; placeholder: string; debounceInterval: number; }) { const [query, setQuery] = useState(''); const [timer, setTimer] = useState();

  useEffect(() => { if (timer) { clearTimeout(timer); } setTimer(setTimeout(() => { handleSearch(query); }, debounceInterval)); }, [query]);

  const handleOnChange = (e: ChangeEvent): void => { setQuery(e.target.value); };

  return (

  ); }