Angular 2 : onResize method firing multiple times

Question

我需要在调整窗口大小时调用方法。我正在使用以下代码-

@HostListener('window:resize', ['$event'])
onResize(event) {

}

但问题是，每当我调整浏览器大小时，onResize 方法都会触发多次。

Answer 1

调整大小可能会触发多个事件，为了一次将其缩小到一个事件，将所有事件发送到一个序列并执行去抖(或使用去抖进行节流)以一次仅处理哪些事件:

resizeEvent$: Subject<MouseEvent> = new Subject<MouseEvent>();

@HostListener('window:resize', ['$event'])
onResize(event){
  this.resizeEvent$.next(event);
}

然后在你的构造函数或 ngOnInit 中:

this.resizeEvent$.debounceTime(100).subscribe(this.actualResizeHandler);

这将确保在最后一次调整大小事件触发后的 100 毫秒内您将处理调整大小，从而忽略多个事件。请注意，这可能会导致饥饿，因为只要有事件发生，反跳就会阻塞。另一种方法是将其分块，在本例中每 500 毫秒分块:

this.resizeEvent$.throttleTime(500).debounceTime(490).subscribe(this.actualResizeHandler);

throttle 规定，只有每 500 毫秒内的第一个事件才会触发，丢弃以下事件，反跳规定您实际上在周期结束时执行工作，它会起作用，因为 throttle 确保没有其他事件在此期间，最终会触发反跳。

有两件事要注意:

1. 您获得的事件可能是“旧的”，这意味着，不要依赖它保存的数据，直接从组件查询大小信息。
2. 去抖周期稍短，以防止竞争条件和计时问题。