如何对 onChange 反应事件执行去抖动？

Question

当用户在输入字段中键入一些信息时，我在向服务器执行请求时遇到问题。请求已发送，但如果用户快速从字段中删除所有内容，则默认情况下不会发送请求，但会发送最后一封信。所以会发生一些延迟。

例如，当用户快速键入内容并发送一次请求 2 毫秒时，我需要以某种方式实现去抖动

<input type="text"
  placeholder="add"
  className='input'
  onChange={(e) => this.search(e.target.value)}
  onKeyDown={this.handleSearchParam}
  value={keyword}
/>

处理输入的函数

search(text) {
    this.props.onTextInputAdd(text);
    if (text) {
     this.props.onSearchTypeResult(this.props.tab, text)
    } else {
      this.props.onLoadDefaultInfo(this.props.tab);
    }
}

const mapStateToProps = state => ({
  keyword: state.searchReducers.keyword,
});

const mapDispatchToProps = dispatch => ({
  onSearchTypeResult: (tabName, query) => dispatch(actionCreators.loadSearchInfo(tab, tabQuery)),
  onTextInputAdd: keyword => dispatch(actionCreators.addKeyword(keyword)),
});

下面是动作：

const loadSearchResults = (tabName, query) => axios.get(`testurl?query1=${tabName}&query2=${query}`)

export const loadSearchInfo = (tabName, query) => dispatch => {
  loadSearchResults(tabName, query).then(response => {
    const data = { ...response.data };
    dispatch(updateTabInfo(data));
  });
}

export const updateTabInfo = data => ({
  type: LOAD_TAB_INFO,
  payload: data,
});

我尝试使用自定义去抖动，但它不起作用。每次我输入文本时都会触发它，但不是间隔

Answer 1

你可以像这样使用 lodash debounce 方法：

search = _.debounce((text) => {
  this.props.onTextInputAdd(text);
  if (text) {
   this.props.onSearchTypeResult(this.props.tab, text)
  } else {
    this.props.onLoadDefaultInfo(this.props.tab);
  }
}, 300);

然后你就可以像以前一样使用它了。函数搜索将在 300 毫秒后触发。 2ms 可能太快了。

<input type="text"
  placeholder="add"
  className='input'
  onChange={(e) => this.search(e.target.value)}
  onKeyDown={this.handleSearchParam}
  value={keyword}
/>

要使用 lodash，运行 npm install lodash --save 或 yarn add lodash 然后像这样导入它：

import _ from "lodash";

如果你不想只为 debounce 函数添加 lodash，你可以像这样创建自己的 debounce 函数：

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    const later = function() {
      timeout = null;
      func.apply(context, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};