setTimeout（コールバック、0）からのコールバックの遅延の原因

Question

setTimeout(func, 0)が呼び出された関数に大きな遅延を引き起こす原因を知っている人はいますか？ setTimeout(func, 0)が実行されてから実際にfuncが呼び出されるまでの間に、1.2秒以上の遅延が見られます。

私はこの動作をChrome v52でのみ表示します（v51にはこの機能がありません）。だから、Chromeの問題かもしれませんが、バグとして報告する前に、私はそれを調査したいと思います。

私は残念ながらそれをreprosする小さなケースを持っていません。これは、スクロールイベントに応答してAngularJSアプリで発生します。マウスホイールでスクロールイベントトリガーを処理します。その一部として、setTimeout(func, 0)を呼び出してフォローアップ作業を行います。

Chrome devtoolsを使用すると、この1.2秒のギャップの間に実行されるjavascriptがほとんどないことがわかります。私はスレッドをブロックしていません。実際には、console.profileとconsole.profileEndを使用して、特定の1.2秒間のgrapをプロファイルしました。その時間の99％がアイドルであることを示しています。

devtoolsでタイムラインを見ると、その期間中に「マウスホイール」イベントが処理されることがわかります。それらの多くがあります（ギャップの最初の1秒間は5ミリ秒毎に1つです）。マウスホイールがその時間の間にスクロールされていないので、これは少し奇妙です。私はMac Magic Mouseの仮想スクロールホイールを1回フリックし、スクロール可能な領域の上部に叩きつけます。イベントが終了した後、マウスホイールイベントが発生し続けます。

誰にもアイデアはありますか？非常に速く実行されるマウスホイールイベントの小さなストリームがコールバックの呼び出しを遅らせることができますか？そのタイムアウトコールバックがその予定時刻の1.2秒後に呼び出された理由を調査する方法はありますか？

：setTimeoutのショーコールバックを表すタイムラインの画像が追加されました。画像

のsetTimeout（FUNC、0）タスクに並んイベントがすでに存在する場合、あなたのコードが第二の0で、実行されます保証するものではありませんを含めるためにここに投稿

Answer 1

（おそらくスクロールによってトリガされる）、それらは実行スタックに入れられ実行されなければならない。 https://www.youtube.com/watch?v=8aGhZQkoFbQ

から

チェックこの画像を使用すると、即時実行が必要な場合、あなたは何のイベントリスナを意味していない、何のイベントは、ページをスクロールしている時にタスクキューに追加されていないことを確認する必要があります.on('scroll', func)のようにするか、funcを登録する前にsetTimeoutを実行してください。.on('scroll')

Answer 2

setTimeout(..., 0)はイベントをイベントキューに入れます。しかし、既にキューに入れられている他のイベントより優先されるわけではありません。確かにスクロールイベントを処理するときは、多くのスクロールイベントがキューに入れられる状況になりますが、スクロールイベントハンドラコードは以前のスクロールイベントを処理しています。

実際、スクロールイベントを処理するときには、簡単に遅延が発生します。コールスタックが空の場合、つまり現在実行中のイベントハンドラが終了すると、次のイベントがイベントキューから取得されます。そのキューのどこかにタイムアウト関連のイベントがあっても、優先順位は高くなりません。すべてのイベントは順番を待たなければなりません。

たとえば、キュ​​ー内に既に10個のスクロールイベントがある場合、それらはすべて処理されなければならず、マウスがまだスクロールしているときは、問題が悪化するだけです。より高いレートでコードが処理できるようにすることができます。

これを解決する1つの方法は、スクロールイベントハンドラをできるだけ軽くし、重いものを非同期的に処理することです。ハンドラが以前の実行で既に何らかの方法で実行がスケジュールされていることを検出した場合、そのタスクをキャンセルして新しいバージョンに置き換えることができます。

サンプルコード：

var task = -1; 
window.addEventListener('scroll', function(e) { 
    clearTimeout(task); 
    task = setTimeout(function() { 
     // all the (heavy) processing related to scrolling comes here. 
    }, 0); 
}; 

このsetTimeoutは質問から1と混同してはなりません。しかし、別のsetTimeoutを開始した場合、それは順番に処理されることに注意してください。上記のコードは、実際の処理をキューの最後に移動するだけです。しかし、さらに多くのスクロールイベントがある場合は、それぞれキューからタイムアウトイベントを削除し、キューのエンドに新しいキューを入れます。

これは、実際にはスクロールハンドラコードの重い部分の実行が少なくなるため、一部のアニメーションの流動性にいくつかの悪影響を及ぼします。しかし、が遅れてになるのを防ぎ、ボーナスとして、あなたの他のsetTimeoutイベントが早くターンします。