使用React Hooks和响应式编程(RxJS)的React ajax debounce和cancel示例解决方案:

import React, { useEffect, useState } from "react";
import { ajax } from "rxjs/ajax";
import { debounceTime, delay, takeUntil } from "rxjs/operators";
import { Subject } from "rxjs/internal/Subject";

const App = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filterChangedSubject] = useState(() => {
    // Arrow function is used to init Singleton Subject. (in a scope of a current component)
    return new Subject<string>();
  });

  useEffect(() => {
    // Effect that will be initialized once on a react component init.
    const subscription = filterChangedSubject
      .pipe(debounceTime(200))
      .subscribe((filter) => {
        if (!filter) {
          setLoading(false);
          setItems([]);
          return;
        }
        ajax(`https://swapi.dev/api/people?search=${filter}`)
          .pipe(
            // current running ajax is canceled on filter change.
            takeUntil(filterChangedSubject)
          )
          .subscribe(
            (results) => {
              // Set items will cause render:
              setItems(results.response.results);
            },
            () => {
              setLoading(false);
            },
            () => {
              setLoading(false);
            }
          );
      });

    return () => {
      // On Component destroy. notify takeUntil to unsubscribe from current running ajax request
      filterChangedSubject.next("");
      // unsubscribe filter change listener
      subscription.unsubscribe();
    };
  }, []);

  const onFilterChange = (e) => {
    // Notify subject about the filter change
    filterChangedSubject.next(e.target.value);
  };
  return (
    <div>
      Cards
      {loading && <div>Loading...</div>}
      <input onChange={onFilterChange}></input>
      {items && items.map((item, index) => <div key={index}>{item.name}</div>)}
    </div>
  );
};

export default App;

与其在debounce()中包装handleOnChange，不如在debounce()中包装回调函数中的ajax调用，从而不破坏事件对象。就像这样:

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

这个解决方案不需要任何额外的库，它也会在用户按下enter时启动:

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

const [search, setSearch] = useState('');
const [searchFor, setSearchFor] = useState(search);

useEffect(() => {
    console.log("Search:", searchFor);
}, [searchFor]);

const fireChange = event => {
    const { keyCode } = event;
    if (keyCode === 13) {
        event.preventDefault();
        setSearchFor(search);
    }
}

const changeSearch = event => {
    const { value } = event.target;
    setSearch(value);
    debounceSetSearchFor(value);
};

const debounceSetSearchFor = useCallback(debounce(function(value) {
    setSearchFor(value);
}, 250), []);

输入可以是这样的:

<input value={search} onKeyDown={fireChange} onChange={changeSearch}  />

有点晚了，但应该有帮助。 创建这个类(它是用typescript写的，但是很容易转换成javascript)

export class debouncedMethod<T>{
  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;
}

要使用

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

2019年:尝试钩子+承诺跳跃

这是我如何解决这个问题的最新版本。我会用:

awesome- debount -promise来debount async函数 使用-constant将该函数存储到组件中 React-async-hook来获取结果到组件中

这是一些最初的连接，但你是在自己组成原始块，你可以让你自己的自定义钩子，这样你只需要这样做一次。

// Generic reusable hook
const useDebouncedSearch = (searchFunction) => {

  // Handle the input text state
  const [inputText, setInputText] = useState('');

  // Debounce the original search async function
  const debouncedSearchFunction = useConstant(() =>
    AwesomeDebouncePromise(searchFunction, 300)
  );

  // The async callback is run each time the text changes,
  // but as the search function is debounced, it does not
  // fire a new request on each keystroke
  const searchResults = useAsync(
    async () => {
      if (inputText.length === 0) {
        return [];
      } else {
        return debouncedSearchFunction(inputText);
      }
    },
    [debouncedSearchFunction, inputText]
  );

  // Return everything needed for the hook consumer
  return {
    inputText,
    setInputText,
    searchResults,
  };
};

然后你可以用钩子:

const useSearchStarwarsHero = () => useDebouncedSearch(text => searchStarwarsHeroAsync(text))

const SearchStarwarsHeroExample = () => {
  const { inputText, setInputText, searchResults } = useSearchStarwarsHero();
  return (
    <div>
      <input value={inputText} onChange={e => setInputText(e.target.value)} />
      <div>
        {searchResults.loading && <div>...</div>}
        {searchResults.error && <div>Error: {search.error.message}</div>}
        {searchResults.result && (
          <div>
            <div>Results: {search.result.length}</div>
            <ul>
              {searchResults.result.map(hero => (
                <li key={hero.name}>{hero.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

你会发现这个例子在这里运行，你应该阅读react-async-hook文档了解更多细节。

---

2018年:尝试打破承诺

我们经常希望取消API调用，以避免后端充斥着无用的请求。

在2018年，使用回调(Lodash/Underscore)对我来说感觉很糟糕，很容易出错。由于API调用以任意顺序解析，因此很容易遇到样板文件和并发问题。

我用React创建了一个小库来解决你的烦恼:awesome-debounc -promise。

这个不应该比这个更复杂:

const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));

const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);

class SearchInputAndResults extends React.Component {
  state = {
    text: '',
    results: null,
  };

  handleTextChange = async text => {
    this.setState({ text, results: null });
    const result = await searchAPIDebounced(text);
    this.setState({ result });
  };
}

debound函数确保:

API调用将被撤销 debented函数总是返回一个promise 只有最后一个电话的承诺才能解决问题 一个这个。setState({result});每个API调用会发生什么

最后，如果你的组件卸载了，你可以添加另一个技巧:

componentWillUnmount() {
  this.setState = () => {};
}

注意，Observables (RxJS)也非常适合用于分解输入，但它是一个更强大的抽象，可能更难正确学习/使用。

---

< 2017:还想用回调解调吗?

这里的重要部分是为每个组件实例创建单个debpublished(或throttled)函数。您不希望每次都重新创建debounce(或throttle)函数，也不希望多个实例共享同一个debounce函数。

我没有在这个答案中定义一个deboundation函数，因为它并不真正相关，但这个答案将与_.debounce的下划线或lodash以及任何用户提供的deboundation函数完美地工作。

---

好主意:

因为debound函数是有状态的，所以我们必须为每个组件实例创建一个debound函数。

ES6 (class属性):推荐

class SearchBox extends React.Component {
    method = debounce(() => { 
      ...
    });
}

ES6(类构造函数)

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.method = debounce(this.method.bind(this),1000);
    }
    method() { ... }
}

ES5

var SearchBox = React.createClass({
    method: function() {...},
    componentWillMount: function() {
       this.method = debounce(this.method.bind(this),100);
    },
});

请参阅JsFiddle: 3个实例每个实例产生1个日志条目(这在全局上是3个)。

---

这不是个好主意:

var SearchBox = React.createClass({
  method: function() {...},
  debouncedMethod: debounce(this.method, 100);
});

它不会工作，因为在类描述对象创建期间，这不是创建的对象本身。这一点。方法不会返回你期望的内容，因为这个上下文不是对象本身(它实际上还不存在，因为它刚刚被创建)。

---

这不是个好主意:

var SearchBox = React.createClass({
  method: function() {...},
  debouncedMethod: function() {
      var debounced = debounce(this.method,100);
      debounced();
  },
});

这一次，您有效地创建了一个调用This .method的debaded函数。问题是您在每次debouncedMethod调用时都要重新创建它，因此新创建的debounce函数不知道以前的调用!您必须在一段时间内重用相同的回调函数，否则将不会发生回调。

---

这不是个好主意:

var SearchBox = React.createClass({
  debouncedMethod: debounce(function () {...},100),
});

这有点棘手。

类的所有挂载实例都将共享相同的debked函数，这通常不是您想要的!请参阅JsFiddle: 3个实例全局只生成1个日志条目。

您必须为每个组件实例创建一个debked函数，而不是在类级别上创建一个由每个组件实例共享的debked函数。

---

负责React的事件池

这是相关的，因为我们经常想要反弹或抑制DOM事件。

在React中，你在回调中接收到的事件对象(即SyntheticEvent)是池化的(现在有文档了)。这意味着在事件回调被调用之后，您接收到的SyntheticEvent将被放回具有空属性的池中，以减少GC压力。

因此，如果您以异步方式访问SyntheticEvent属性到原始回调(如果您节流/debounce，可能会出现这种情况)，您访问的属性可能会被擦除。如果希望事件永远不被放回池中，可以使用persist()方法。

不持久化(默认行为:合并事件)

onClick = e => {
  alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
  setTimeout(() => {
    alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
  }, 0);
};

第二个(异步)将打印hasNativeEvent=false，因为事件属性已被清除。

与坚持

onClick = e => {
  e.persist();
  alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
  setTimeout(() => {
    alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
  }, 0);
};

第二个(异步)将打印hasNativeEvent=true，因为持久化允许您避免将事件放回池中。

您可以在这里测试这两个行为:JsFiddle

请阅读Julen的回答，了解在throttle/debounce函数中使用persist()的示例。

这里已经有很多好的信息了，但为了简洁。这对我很有用……

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

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