javascript - 如何延迟发送 Action (去抖动)

Question

我有一个场景，我需要在输入完成两秒后分派(dispatch)一个 Action 。 (假设用户在没有 2 秒间隔的情况下键入 1000，因此我只需要在键入 1000 之后和 2 秒后调度操作)。

以前我用过debounce-promise做这样的事情，我需要从 API 获取下拉列表，但为此我直接在组件中使用带有 AJAX 调用的库。它工作正常。

现在我需要像这样发送一个 Action 。

  // should be dispatched only for the last request
  const getRateReq = dispatch(getRates());

  const getRate = debounce(getRateReq, 2000, {
    leading: false,
  });

  const onChange = (e) => {
     setValue(e.target.value);
     getRate(e.target.value);
  }

现在也只有在完成输入两秒后才会调度操作。但随后它会发出所有请求 1、10、100、1000(即使输入 1000 时没有两秒间隔)。我怎样才能修复此问题并仅针对 2 秒内的最后一次输入发送操作？

如有任何帮助，我们将不胜感激。谢谢

编辑:添加了基本的 onChange 函数

Answer 1

你可以这样做。

let timeOut = null;
SearchFilter: (name, value) => {
    clearTimeout(timeOut);
    dispatch(SearchFilter(name, value));
    timeOut = setTimeout(() => {
            dispatch(callfunction());
        }, 2000);
    }

它将调度等待输入 2 秒的操作。