仅当用户完成输入并等待 n 秒时，如何在自定义自动完成中触发 ajax 调用答案

【问题标题】：How to fire an ajax call in a custom autocomplete only when the user finishes typing and waits for n seconds仅当用户完成输入并等待 n 秒时，如何在自定义自动完成中触发 ajax 调用
【发布时间】：2019-02-15 12:51:12
【问题描述】：

有一个带有自定义自动完成功能的输入框。我根据输入框 onkeyup 中输入的内容对服务器进行 api 调用。然而，这会导致大量的 api 调用，因为它发生在输入的每个字符上。相反，我只想在用户进入并等待之后才进行 api 调用。

我使用了来自 lodash 的 debounce。在拨打电话之前等待用户停止输入。但是当它这样做时，它会进行多次调用

假设我输入了“柏林” 在 debouce 超时结束后，我将收到 6 个 ajax 调用（B、BE、BER、BERL、BERLI、BERLIN）。理想情况下，应该只有一个与 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 调用，没什么特别的。

【问题讨论】：

你能粘贴你的代码吗？
这就是你想要的：stackoverflow.com/questions/4220126/…
您可以代替去抖动（运行多个查询），您可以使用 setTimeout（例如在 n 秒后）检查计时器是否仍然处于活动状态，否则只需将变量 QUERY 设置为 @ 987654327@ 并在 setTimeout 回调中清除超时，使用当前选择值进行查询（如果 QUERY var 是 true）并将计时器再休息 n 秒。类似的东西可以工作例如stackoverflow.com/questions/53592232/…

标签： javascript reactjs antd

【解决方案1】：

在客户端，您可以使用 Javascript setTimeout 方法。但我真的不确定你想在哪里做这个。请给我们更多代码。

【讨论】：