Wait before sending AJAX call

[radar]

How can I get react-select to wait for someone to stop typing before making an async call so that I don't get calls like this?

[janmyler]

Hi @radar, in our project, we use throttle or debounce methods from lodash to wrap the function we pass into asyncOptions prop.

If you want to wait for the user to stop typing for a certain amount of time, debounce is what you're looking for. Of course, any implementation of debouncing will do.

[radar]

Wonderful, thank you @janmyler!

[rescribet]

For people not wanting to use external libraries for this, a simple timeout also does the trick:

window.clearTimeout(this.currentFetchTimeout);
this.currentFetchTimeout = window.setTimeout(() => {
          // Do some fetching and call callback();
});

[vgoklani]

Hi @janmyler could you please post a good snippet for how you implemented throttle/debounce with react-select? Thanks! It's not clear how to bind the input/callback with the debounced function?

[marcelometal]

You can use es6-promise-debounce.

<Select.Async
...
loadOptions={debounce(this.getItem, 500)}
... />

[mikdatdogru]

thanks @marcelometal

perhaps you may be afraid to use a package that does not actively develop like me.
so you can use the lodash.

import _ from 'lodash';

 <Select.Async
    ...
    loadOptions={_.debounce(this.getItem, 500)}
    ...
/>