Question

我有一个繁重的操作，当调整窗口大小时，它会重新排列许多DOM元素。

因此，我一直使用debounceTime(250ms)来创建更新组件之前的延迟。除非用户连续调整窗口大小，否则此方法效果很好。例如;如果我将窗口调整得很慢很宽，持续10秒，则可观察到的值将不会发出。 debounceTime(250ms)仅在过去250毫秒后发出一个值，而没有任何新值。

我需要一个类似于debounceTime()的运算符，它每250ms至少发出一个值，以便用户在调整窗口大小时收到一些反馈。

这是一个示例组件：

 @Component({....})
 public class ResizeComponent {
      private readonly widthChange: Subject<number> = new ReplaySubject(1);

      public constructor(private elRef: ElementRef<HTMLElement>) {
           this.widthChange.pipe(debounceTime(250)).subscribe((width: number) => {
              // do resize work here
           });
      }

      @HostListener('window:resize')
      public resize() {
           this.widthChange.next(this.elRef.nativeElement.clientWidth);
      }
}

问题：

只有在用户停止调整大小250ms之后，以上内容才会处理窗口大小调整。如何每隔250ms处理一次调整大小，以及如何处理最后的调整大小值。

Answer 1

您可以通过组合两个运算符来实现。

sampleTime（250）
distinctUntilChanged（）

observable.pipe(sampleTime(250), distinctUntilChanged(),
).subscribe(() => {
  ...
});

每250ms发射一次值，类似于debouceTime（），但没有延迟

1 个答案: