マウスドラッグ中にHTML5キャンバスに再描画コンテンツが表示されない

Question

HTML5キャンバスにa circuit simulator that redraws as you drag things aroundがあります。

ドラッグ中に再描画できないことがあります。マウスの移動を止めるまで、最後に描画されたフレームを保持し、更新されたコンテンツの表示を開始します。

最初は、これが60fps以下のスロットルを使用しているコードでこれが何らかの問題であると思っていました。たぶん、タイマーイベントは、より優先度の高いUIイベントかそのようなものによって払われていたかもしれません。しかし、私はChromeでコードをプロファイリングしました。プロファイラーは、描画コードが呼び出されていることを確認し、妥当な時間内に終了していることを確認します。

ここでは、問題が発生している状態でドラッグしたときに収集したプロファイルの例を示します。アイドル時間をたっぷり使って、5msの中に仕上げドローコード注：

だから、ほとんど私が困惑して確認するかのアイデアを必要とします。

再描画がユーザーの操作によってトリガーされているときに表示されない一般的な理由は何ですか？

Answer 1

setTimeoutの代わりに​​を使用してください。

私のテスト中（Chrome、Windows 10）、マウスホイールを素早く上下に回転させると、停止するまでsetTimeoutコールバックが実行されないようにすることができました。これにより、キャンバスのアニメーションでは、setTimeoutが本当に悪い考えになります。私は​​サイクルを使用するように調整コードを切り替えました。それは、冷却時間が終了するまでそれ自体を再スケジューリングしており、遅れは目立って減少しました。

Answer 2

他のドローループを調べます。

プロファイラのスタックトレースに間違った再描画コードが表示されていることに気付きました。このプログラムには、アニメーション化が必要なキャンバスを含むダイアログがありました。ダイアログは表示されませんが、そのコードは​​にスパムしていました。どういうわけか、私はがちょうどの理由を知らないが、これはメインのドローループを妨害していた。隠されたダイアログですべての描画が行われていました。

一度、ダイアログコードを​​というスパムで修正したところ、一時停止中のドラッグの問題は消えました。