Question

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

当用户快速键入内容并发送一次请求（例如2ms）时，我需要实现某种方式的反跳操作

<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的反跳方法：

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

然后，您将可以像以前一样使用它。 300ms后将触发功能搜索。 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";

如果不想只为去抖动功能添加lodash，则可以创建自己的去抖动功能，如下所示：

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);
  };
};

如何在onChange react事件上执行反跳操作？

1 个答案: