僅當用戶完成鍵入並等待n秒時，如何在自定義自動完成功能中觸發ajax調用

Question

有一個帶有自定義自動完成功能的輸入框。 我根據在onkeyup輸入框中輸入的內容對服務器進行api調用。 但是，這會導致很多api調用，因為它發生在每個輸入的字符上。 相反，我只想在用戶進入並等待之后才進行api調用。

我從lodash使用了去抖功能。 它等待用戶停止鍵入后再撥打電話。 但是，當它這樣做時，它將發出多個呼叫

假設我輸入了“柏林”，則在取消超時結束后，我將遇到6個ajax調用（B，BE，BER，BERL，BERLI，柏林）。 理想情況下，應該只用BERLIN進行一次api調用，因為用戶輸入了很多內容后就停止了鍵入。

我不知道代碼在這里有多大意義。 但我還是會貼

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調用。 普通的axios通話，沒有任何花哨。

Answer 1

在客戶端，您可以使用Javascript setTimeout方法。 但我真的不確定您要在哪里做。 請給我們更多代碼。