Есть поле ввода с пользовательским встроенным автозаполнением.Я делаю API-звонки на сервер на основе того, что введено в поле ввода onkeyup.Однако это приводит к большому количеству вызовов API, как это происходит с каждым введенным символом.Вместо этого я хотел бы делать вызовы API только после того, как пользователь вошел и ждал.
Я использовал debounce от lodash.Который ждет, пока пользователь прекратит печатать, прежде чем сделать звонок.Но когда это происходит, он делает несколько вызовов
Предположим, что я вошел в "Берлин", я получу 6 вызовов ajax (B, BE, BER, BERL, BERLI, BERLIN) после того, как истечет время ожидания debouce.В идеале должен был быть только один вызов API с BERLIN, так как пользователь прекратил печатать после того, как ввел столько.
Я не знаю, сколько кода будет иметь смысл здесь.Но я все равно вставлю его
fetchConsigneeDetail = async (searchStr) => {
if (!searchStr) return
const param = {
customerName: this.state.assoCompany.text,
text: searchStr,
type: 'CODE'
}
let data = await ADD_TRIP_API.getConsigneeDetails(param)
this.setState({ consigneeArr: data })
}
<Select
allowClear
showSearch
size="large"
placeholder="e.g KA56AB122"
onSearch={input => {
const debounceCalculate = _.debounce(this.fetchConsigneeDetail, 1300);
debounceCalculate(input);
}}
}
onChange={this.selectConsignee}
>
{consigneeArr &&
consigneeArr.length > 0 &&
consigneeArr.map((data, index) => (
<Option key={index} value={data.code}>
{data.code}
</Option>
))}
</Select>
ADD_TRIP_API.getConsigneeDetails(param) делает вызов API.Нормальный аксиоз звонка, ничего особенного там нет.