javascript - 使一个处理程序为反应中的所有输入元素去抖动

Question

我有一个父组件，其状态包含数据和一个处理程序，用于在任何输入元素更改时更新它。

现在我想提高性能，因为这个处理程序正在进行大量验证，所以我想等到最后一次击键再开始验证，但我仍然希望输入对用户输入做出反应。

问题是当我对处理程序进行去抖动处理时，它可以工作，但是在去抖动延迟期间，如果我快速切换到不同的输入元素并开始输入，它将删除旧事件，所以我被困在元素内部的结果中，但是仅对第二个元素进行验证。

我试图创建一个新函数，该函数将调用该处理程序以使每个实例成为不同的实例，这样它们就不会互相阻塞，但它不起作用。

试图复制该函数然后运行它，没有运气。

我也尝试自己设置超时，这确实有效，但后来我没有设法找到一种方法来阻止它发生新事件:(

我坚持在构造函数级别对处理程序进行去抖动：

this.onAdvancedChange = debounce(this.onAdvancedChange, 500);

这正是我之前描述的。

有两个处理程序，其中一个不会对输入类型做出反跳：

onSimpleChange({ target }) {
  const newData = ...; // Im copying target data to a new object here to pass instead.
  setState(..., () => this.onAdvancedChange({ target: newData }));
}

onAdvancedChange({ target }) {
  validate(target);  
  if needed -> setState(...);
}

它确实有效，但是当我快速切换到不同的输入并开始输入而 prev debounce 还没有命中时，它根本不会命中，只有第二个会验证。

如何将每个输入调用的高级处理程序设为私有，或者我尝试使用超时的另一个选项，但是如何在每个输入的每个新事件上单独停止它？

非常感谢你。

标签： javascriptreactjsdebouncing