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

Answer 2

debounceTime不应该这样做。请改用delay。

debounceTime：丢弃发射的值小于指定值的值输出之间的时间

您正在寻找delay。
您的代码应为：

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

去服务电话的时间

2 个答案: