Reactjs 反应：当用户停止键入时触发功能

我将react select与异步创建表一起使用，并将其实现到Netsuite自定义页面。问题是，我想加载getAsyncOptions函数，使其仅在用户停止键入时触发。目前，这些代码行使得输入字段速度非常慢，因为每次向输入中添加字母时都会触发函数。我也无法将获取的数据插入到状态，因为它将填充1000条记录

Email.tsx

getAsyncOptions(inputValue) {
return new Promise((resolve) => {
  var typingTimer; //timer identifier
  var doneTypingInterval = 1000; //time in ms (1 second)

  if (inputValue.length <= 3) {
    return resolve([]);
  }
  clearTimeout(typingTimer);
  if (inputValue) {
    return (typingTimer = setTimeout(function () {
      var t0 = performance.now();
      emailSearch(inputValue).then((data) => {
        const returnData = [];
        data.forEach((contact) => {
          returnData.push({
            label: contact.email + " - (" + contact.company + ")",
            value: contact.email,
          });
        });

        resolve(returnData);
        console.log(
          "Call to email search function took " +
            (t1 - t0) +
            " milliseconds."
        );
      });
      var t1 = performance.now();
    }, doneTypingInterval));
  }
});

我们已经有一段时间面临这个障碍，任何想法或帮助都将非常感谢！非常感谢你，上帝保佑

编辑：

---

添加了一些代码。onChange只更新了一些状态，问题是loadOptions，因为它触发了getAsyncOptions。

我已经解决了这个问题，似乎问题出在去盎司上。我正在使用，问题是我使用了leading=true选项，这使得UI对更改没有响应

根据该代码：

this.debouncedLoadQuery = debounce(loadOptions, 2000, {
  leading: true,
});

this.debouncedLoadQuery = debounce(loadOptions, 2000);

根据本守则：

this.debouncedLoadQuery = debounce(loadOptions, 2000, {
  leading: true,
});

this.debouncedLoadQuery = debounce(loadOptions, 2000);

---

你所追求的是所谓的“去盎司”函数。去抖动是指延迟函数的执行，直到函数在特定时间内没有被调用为止。我添加了去盎司，似乎只是延迟了读取数据的加载。但是，在提取数据时，UI没有响应。谢谢你的评论！我最初将此标记为重复，但后来发现您已经在尝试消除某些内容的影响。“当用户停止键入时触发函数”基本上转化为对

onChange

处理程序或

onChange

处理程序正在更新的任何内容进行去抖动。您能否提供一个更全面的代码示例，以便我们可以跟踪从

onChange

到

emailSearch

的事件？这有帮助吗？更新了问题。谢谢您的回复！