如何延迟发送动作（去抖动）答案

【问题标题】：How to dispatch an action with delay (debounce)如何延迟发送动作（去抖动）
【发布时间】：2019-11-01 06:17:05
【问题描述】：

我有一个场景，我需要在输入完成两秒后调度一个动作。（假设用户输入 1000 时没有 2 秒的间隔，所以我需要在输入 1000 并在 2 秒后发送操作）。

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

现在我需要发送这样的操作。

  // 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 功能

【问题讨论】：

标签： javascript reactjs redux promise debounce

【解决方案1】：

你可以做这样的事情。

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

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

【讨论】：

谢谢。我会试试这个。顺便说一句，我需要的是在 2 秒间隔内对最后一个输入发送一个动作。因此，如果用户只输入 1 并等待 2 秒，那么应该调度该操作。如果用户键入 100 且在操作之间没有 2 秒的延迟，则该操作应仅用于 100（而不是 1 或 10）。这就是我想要的。
你可以在onchange函数中添加延迟
但是值也会随着延迟而变化，对吧？但我需要的是立即更改值（在 onChange 函数上），但仅在 2 秒间隔内为最后一个输入调度动作。
最后输入的标准是什么？你怎么知道这是最后一个输入？
如果输入在两秒内没有改变，则应该分派动作。例如：1) 输入 1 并等待 2 秒动作应该被调度。 2）输入1然后0（10）没有2秒之间没有任何延迟，然后等待2秒。然后应该为 10 的值分派动作，因此，应该考虑在 2 秒间隔内最后输入的值来分派动作。

【解决方案2】：

您需要使用 loadash 的 debounce 方法并执行以下操作：

onChange = debounce(anyInput => {
    }, 2000);

因此，您必须在输入完成后以及 2 秒后在 onchange 方法中进行 API 调用。不确定这是您要问的吗？

【讨论】：

我会试试这个。顺便说一句，我需要的是在 2 秒间隔内对最后一个输入发送一个动作。因此，如果用户只输入 1 并等待 2 秒，那么应该调度该操作。如果用户键入 100 且在操作之间没有 2 秒的延迟，则该操作应仅用于 100（而不是 1 或 10）。这就是我要的。顺便说一句，谢谢
这正是这种方法的工作原理。它在指定的秒数内等待输入更改，然后仅在 2 秒后才应用。如果你立即输入 100 而没有延迟，它只会运行 100 而不会运行 1 和 10。