Angular2：onResizeメソッドを複数回起動する

Question

ウィンドウのサイズが変更されるたびにメソッドを呼び出す必要があります。私は次のコードを使用しています：

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

} 

しかし、私はブラウザのサイズを変更するときはいつでも、問題は、複数回発射されています。

Answer 1

サイズ変更は、複数のイベントをトリガーする可能性がある時に単一のイベントにそれを絞り込むために、シーケンスにすべてのイベントを送信し、（デバウンスまたはスロットル）デバウンスを行う時だけ何を処理するために：

あなたのコンストラクタ、またはngOnInitで次に

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

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

：

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

これが最後のresizeイベント後のみ100ミリ秒は、したがって、複数のイベントを無視して、サイズを変更処理するだろう解雇ことを保証します。イベントがある限り、これは飢餓原因につながる可能性があることに注意してください。デバウンスはブロックされます。

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

スロットルは、以下のものを落とし、各500ミリ秒で唯一の最初のイベントがトリガされますことを提供し、デバウンスは、あなたが実際に行う用意されています。別のアプローチは、この例では、すべての500ミリ秒に、チャンクにそれになりますスロットルがその期間中に他のイベントがないことを確実にして、デバウンスが最終的にトリガするので、その期間の終わりの作業は機能します。

2つのことノートへ：

1. あなたが得るイベントは、「古い」ことを意味し、それが保持するデータに依存しない、あなたのコンポーネントから直接サイズ情報を照会することがあります。
2. 競合状態とタイミングの問題を防ぐために、デバウンス期間が少し短くなっています。