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

Erstellen Sie diese Klasse (sie ist in TypeScript geschrieben, aber es ist einfach, sie in JavaScript umzuwandeln).

export class debouncedMethod {
  constructor(method: T, debounceTime: number) {
    this._method = method;
    this._debounceTime = debounceTime;
  }
  private _method: T;
  private _timeout: number;
  private _debounceTime: number;
  public invoke: T = ((...args: any[]) => {
    this._timeout && window.clearTimeout(this._timeout);
    this._timeout = window.setTimeout(() => {
      (this._method as any)(...args);
    }, this._debounceTime);
  }) as any;
}

Und verwenden

var foo = new debouncedMethod((name, age) => {
 console.log(name, age);
}, 500);
foo.invoke("john", 31);

Answer 2

Hier ist ein funktionierendes TypeScript-Beispiel für diejenigen, die TS verwenden und async-Funktionen debouncen möchten.

function debounce any>(time: number, func: T): (...funcArgs: Parameters) => Promise> {
     let timeout: Timeout;

     return (...args: Parameters): Promise> => new Promise((resolve) => {
         clearTimeout(timeout);
         timeout = setTimeout(() => {
             resolve(func(...args));
         }, time)
     });
 }

Answer 3

Wenn wir daran interessiert sind, epic.js mit React zu verwenden, könnten wir die debounceTime RxJS/Operator mit der epic.js-Bibliothek verwenden. Anstatt also Callbacks zu verwenden, könnten wir Observables in React mit Hilfe von epic.js nutzen.

Answer 4

Wenn Sie Lodash oder ein anderes Paket nicht hinzufügen möchten:

import React, { useState, useRef } from "react";

function DebouncedInput() {
  const [isRefetching, setIsRefetching] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const previousSearchTermRef = useRef("");

  function setDebouncedSearchTerm(value) {
    setIsRefetching(true);
    setSearchTerm(value);
    previousSearchTermRef.current = value;
    setTimeout(async () => {
      if (previousSearchTermRef.current === value) {
        try {
          // await refetch();
        } finally {
          setIsRefetching(false);
        }
      }
    }, 500);
  }

  return (
     setDebouncedSearchTerm(event.target.value)}
    />
  );
}

Answer 5

Sie können tlence verwenden:

function log(server) {
  console.log('Verbindung zu', server);
}

const debounceLog = debounce(log, 5000);
// Führen Sie nur den letzten Aufruf nach 5 Sekunden aus
debounceLog('lokale');
debounceLog('lokale');
debounceLog('lokale');
debounceLog('lokale');
debounceLog('lokale');
debounceLog('lokale');