javascript - 忽略函数内 Typescript 中的多个连续函数调用？

Question

我正在尝试实现 autocomplete using Handontable (Angular) by fetching data from the server随着用户的输入。

我注意到每次用户输入更改时都会进行 API 调用，但我想通过在调用之前等待 1 秒让用户停止输入来限制 API 调用的数量。

过去，当我使用 debounceTime 控制事件时，我曾这样做过。但不确定如何在这里实现。

    ...
    column.source = function(query, callback) {
      $component.dataService.getValidValues().subscribe(
        arg => {
          callback(arg);
        },
        err => {
          ...
        }
      );
    }
    ...

此处添加 debounceTime(1000) 并不能阻止多次调用的发生。

$component.dataService.getValidValues().debounceTime(1000).subscribe(...)

Answer 1

正如其他人已经解释的那样，您需要对输入进行去抖处理。在您的情况下，这将是该函数的调用。

实现这一目标的一种方法是使用您在代码中某处创建的主题:

const sourceRequest = new Subject();
sourceRequest.debounceTime(1000).subscribe(callback => {...});

当前在 function(query,callback) { 中的代码将进入 subscribe。然后列定义更改为:

column.source = function(query, callback) {
  sourceRequest.next(callback);
}