从函数内部忽略 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

假设 .getValidValues() 是向远程服务器发出请求的函数，您正在消除来自该函数的事件流。您想要消除来自用户输入的事件流，这将调用次数限制为 .getValidValues()。

尝试这样的事情

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

Answer 2

我唯一能想到的就是让你创建一个标准的 Javascript 去抖动函数来包装你分配给 column.source 的函数，有点像这样：

https://stackblitz.com/edit/angular-mq9jyv?file=src%2Fapp%2Fapp.component.ts

Answer 3

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

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

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

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

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

从函数内部忽略 Typescript 中的多个连续函数调用？

Ignore multiple successive function calls in Typescript from within the function?

javascript

observable

handsontable

typescript