typescript - 服务调用的 debounceTime

Question

我正在尝试使用 debounceTime 方法发送此请求，而不是向服务器发送多次。但不工作。立即调用此服务。

在拖放事件中，我想使用 saveWidgetsPosition 函数保存位置。

  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 });
}