なぜ（...）しないのsetTimeout（）は、私のアプリのラグを作るが、Rxjsタイマーは（）。加入していますか？

ラグジュアリー問題：

私は100ミリ秒の間隔でコンポーネント、つまり「怠惰なロード」いくつかのコメントを、持っています。

私はsetTimeoutメソッドを使用する場合、それは本当にラグです。

成分

<div *ngFor="let post of posts">
   <app-post [post]="post" ></app-post>
</div>

これは私のアプリケーションラグ（平均fpsの14、アイドル時間51100ms）を行います。

while(this.postService.hasPosts()){
  setTimeout(()=> {
   this.posts.push(this.postService.next(10));
  },100);
}

これは私のアプリケーションは、（平均fpsの35、アイドル時間40800ms）を滑らかにします

while(this.postService.hasPosts()){
  timer(100).subscribe(()=> {
    this.posts.push(this.postService.next(10));
  });
}

rxjsタイマーは、はるかに良いことを働く理由いかなるのexplainationは、ありますか？

私は、Firefoxとランタイム分析を行いました。最初の例では、フレームレートは、他の例では14のFPS、35 fpsに低下します。

偶数のアイドル時間は20％低下します。

この方法は、さらに滑らかである（平均fpsの45、アイドル時間13500ms）：

interval(100).pipe(takeWhile(this.postService.hasPosts()).subscribe(()=> {
    this.posts.push(this.postService.next(10));
  });
}

マックスK：

あなたの最後の解決策は正しいものです。

あなたが仕事にそれらを期待ように他の二つのソリューションが動作しないはずです。実は、これは無限ループになるはずです。

これは、JavaScriptのの方法であるイベントループが動作します。以下の画像は、（画像から取られたJavaScriptランタイムのモデルを示し、ここで）：

私たちのために関連する部分があるstackとqueue。JavaScriptランタイムは、上のメッセージを処理しますqueue。各メッセージは、メッセージが処理されるように呼び出される関数に関連しています。

スタックの場合、各関数呼び出しは、関数の引数やローカル変数を含むスタック上のフレームを作成します。関数が別の関数を呼び出す場合は、新たなフレームがスタックの一番上にプッシュされます。関数が戻ったとき、トップフレームは、スタックの飛び出しています。

スタックが空の場合は今すぐJavaScriptランタイムは、上の次のメッセージを処理しますqueue（最も古いもの）。

あなたが使用している場合setTimeout(() => doSomething(),100)、doSomething()関数は100ミリ秒後にキューに追加されます。これは、100ミリ秒を保証する時間が、最小限の時間ではない理由です。したがって、あなたのdoSomething methodスタックが空で、他に何もキューにない場合にのみ、呼び出されます。

しかしとして、あなたは、whileループで反復され、あなたの状態があなたの内のコードに依存してsetTimeoutスタックが空に取得することはできませんので、あなたのために、あなたは無限ループを作成したthis.posts.push(this.postService.next(10));コードが呼び出されることはありません。

RxJSの実装についても同様です。彼らは、ハンドルタイミングにスケジューラを使用しています。そこRxJSで異なる内部のスケジューラの実装がありますが、我々はのための実装で見ることができるようにintervalと、timer私たちは、スケジューラを指定しない場合、デフォルトの1はasyncSchedulerです。asyncSchedulerスケジュールの仕事はしてsetIntervalいるように動作しますsetTimeout上記、およびキューに別のメッセージをプッシュします。

ループしながら、私はあなたと2の解決策を試してみましたが、二つ目は、スーパーラグだったが、whileループのコンソール内部にできた何かを出力しながら、実際には最初の1は完全に私のブラウザを凍結しました。二つ目は、もう少しパフォーマンスである理由私は実際には知らないが、それにもかかわらず、両方のは、あなたが実際に欲しいものではありません。あなたはすでに良い解決策を思い付いたと私はこの答えは最初のソリューションはそんなに悪く行う理由を理解するのに役立つかもしれ願っています。

なぜ（...）しないのsetTimeout（）は、私のアプリのラグを作るが、Rxjsタイマーは（）。加入していますか？

おすすめ