javascript - How to perform debounce on onChange react event? - Stack Overflow

admin管理员组

文章数量:1186436

I have a problem in performing requests to the server when the user types some info in input field. Requests are sent but if the user quickly removes everything from the field, request won't be sent as default but it will send the last letter. So some delay happens.

I need to realize somehow debounce when the user types something quickly and send a request once for 2ms for example

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

function for handling input

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

Here is the action:

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

I tried to use custom debounce but it doesn't work. It fires every time I put text but not on intervals

I have a problem in performing requests to the server when the user types some info in input field. Requests are sent but if the user quickly removes everything from the field, request won't be sent as default but it will send the last letter. So some delay happens.

I need to realize somehow debounce when the user types something quickly and send a request once for 2ms for example

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

function for handling input

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

Here is the action:

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

I tried to use custom debounce but it doesn't work. It fires every time I put text but not on intervals

• javascript
• reactjs

Share Improve this question Follow edited Sep 29, 2018 at 17:10 Matt C 4,55555 gold badges2727 silver badges4444 bronze badges asked Sep 28, 2018 at 18:48 rick1rick1 94644 gold badges1818 silver badges3333 bronze badges 5

• 2 Possible duplicate of Perform debounce in React.js – mhatch Commented Sep 28, 2018 at 19:05
• no it isn't, I checked those but it doesn't the case I have – rick1 Commented Sep 28, 2018 at 19:07
• 1 You need to create a debounce method on the component instance, then call that method from the onchange. The instance method will make your api call. It is the same. – mhatch Commented Sep 28, 2018 at 19:24
• so provide me with instruction to my case please. I do not have any idea how to do that using the link you send me. It is the easiest way to send some link and close theme – rick1 Commented Sep 28, 2018 at 19:26
• I provided you with all the code I write – rick1 Commented Sep 28, 2018 at 19:26

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 27

You can use lodash debounce method like this:

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

Then you will be able to use it like you already do. The function search will be triggered after 300ms. 2ms will probably be too fast.

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

To use lodash, run npm install lodash --save or yarn add lodash then import it like this :

import _ from "lodash";

If you don't want to add lodash only for the debounce function, you can create your own debounce function like this:

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

本文标签： javascriptHow to perform debounce on onChange react eventStack Overflow