HTML5 холст, не показывающий перерисованный контент во время перетаскивания мышью

Question

У меня есть a circuit simulator that redraws as you drag things around на холсте HTML5.

Я заметил, что иногда он не удается перерисовать во время перетаскивания. Он удерживает последний обратный кадр, пока я не перейду к перемещению мыши, а затем покажу обновленный контент.

Сначала я подумал, что это может быть какая-то проблема с кодом, который я использую дросселем, ничейками ниже 60 кадров в секунду. Возможно, события таймера были забиты событиями с более высоким приоритетом или что-то в этом роде. Но я профилировал код в Chrome, и профайлер подтверждает, что код draw вызывается и заканчивается в течение разумного промежутка времени.

Вот скриншот из примера, который я собрал, перетаскивая с проблемой. Обратите внимание Жеребьевка код отделки в 5мс, с большим количеством времени простоя:

Так в основном я в тупик и нужны идеи о том, что нужно проверить.

Каковы некоторые общие причины перерисовывания, которые не отображаются, когда они запускаются действиями пользователя?

Answer 1

Использовать requestAnimationFrame вместо setTimeout.

Во время тестирования (Chrome, Windows 10) я обнаружил, что если бы я просто быстро вращал колесико мыши, я мог бы предотвратить выполнение обратных вызовов setTimeout, пока не остановится. Это делает setTimeout очень плохой идеей, когда речь идет о анимации холста. Я переключил код дросселирования на использование цикла requestAnimationFrame, который просто продолжал реструктурировать себя до тех пор, пока период перезарядки не закончится, а отставание заметно снизилось.

Answer 2

Проверить наличие других ниток.

Я заметил, что трассировка стека профайлера показывает неправильный код перерисовки. В программе был диалог, содержащий холст, который иногда нужно оживлять. Этот код был спам requestAnimationFrame, несмотря на то, что диалог не отображается. Как-то это мешало основному ничьей, хотя я не знаю точно почему. Все розыгрыши происходили в скрытом диалоге.

Как только я исправил спам-код диалога requestAnimationFrame, проблема с паузой-перетаскиванием исчезла.