javascript - 每 250 毫秒发出一次值，类似于 debouceTime() 但没有延迟

Question

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

所以我一直在使用 debounceTime(250ms) 在更新组件之前创建延迟。除非用户连续调整窗口大小，否则这种方法效果很好。例如;如果我非常缓慢地调整窗口大小 10 秒，可观察对象将不会发出任何值。 debounceTime(250ms) 仅在 250ms 过去后发出一个值，没有任何新值。

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

这是一个示例组件:

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

问题:

只有在用户停止调整大小 250 毫秒后，上面的代码才会处理窗口调整大小。如何每 250 毫秒处理一次调整大小并处理最后一次调整大小值。

Answer 1

您可以通过组合 2 个运算符来实现这一点。

• 采样时间(250)
• distinctUntilChanged()

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