debounceTime для вызова службы

Question

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

При событии перетаскивания drag'n'drop я хочу сохранить позиции с помощью saveWidgetsPosition func.

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer !== event.container) {
      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
    } else {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    }

    this.saveWidgetsPosition(this.columns);
  }

Функция сохранения позиций

saveWidgetsPosition(columns: any[]) {
    const columnsLabels = columns.map(x => x.map(y => y.label));

    this.userService.saveWidgetsPosition({ user: this.user, columns: columnsLabels})
        .pipe(debounceTime(5000))
        .subscribe(res => console.log(res));
}

Answer 1

Вы приближаетесь к этому с неправильного направления. Вам нужно отменить исполнение this.userService.saveWidgetsPosition(). Вместо того, чтобы отменить обработку результатов этого.

Вы можете сделать что-то вроде:

widgetPositions = new Subject<any>();
widgetPositions.pipe(
    debounceTime(5000),
    exhaustMap((data) => this.userService.saveWidgetPositions(data))
).subscribe(result => {
    console.log(result);
});

saveWidgetsPosition(columns: any[]) {
    const columnsLabels = columns.map(x => x.map(y => y.label));

    widgetPositions.next({ user: this.user, columns: columnsLabels });
}

Answer 2

debounceTime не должен этого делать. Вместо этого используйте delay.

debounceTime: Отменить отправленные значения, которые занимают меньше указанного времени между выходными данными

Вы ищете <a href="https://www.learnrxjs.io/operators/utility/delay.html" rel="nofollow noreferrer">delay</a>.
Вашкод должен быть:

this.userService.saveWidgetsPosition({ user: this.user, columns: columnsLabels})
      .pipe(delay(5000))
      .subscribe(res => console.log(res));