Игнорировать несколько последовательных вызовов функций в Typescript из функции?

Question

Я пытаюсь реализовать автозаполнение с использованием Handontable (Angular) путем выборки данных с сервера при вводе пользователем.

Я замечаю, что вызовы API выполняются каждый раз, когда изменяется ввод пользователяно я хотел бы ограничить количество вызовов API, подождав 1 секунду, пока пользователь перестанет набирать текст, прежде чем совершать вызов.

Я делал это в прошлом, когда управлял событием с помощью debounceTime но не уверен, как реализовать это здесь.

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

Добавление debounceTime (1000) здесь не предотвращает множественные вызовы.

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

Answer 1

Единственное, о чем я могу подумать, это чтобы вы создали стандартную функцию Javascript debounce, которая оборачивает функцию, которую вы назначаете для column.source, примерно так:

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

Answer 2

Как уже объяснили другие, вам нужно отменить ввод. В вашем случае это будет вызов функции.

Один из способов добиться этого - использовать тему, созданную где-то в вашем коде:

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

Код, который у вас есть внутри function(query, callback) {, входит в subscribe. Затем определение столбца изменяется на:

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

Answer 3

Предполагая, что .getValidValues() - это функция, которая отправляет запрос на удаленный сервер, вы отбрасываете поток событий, поступающих от этой функции.Вы хотите отменить поток событий, поступающих от пользовательского ввода, который ограничивает количество вызовов .getValidValues().

Попробуйте что-то вроде этого

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