Балансировка производительности тяжелых процедур с помощью мыши в режиме реального времени

Question

Если кратко сформулировать этот вопрос, есть ли способ предложить веб-приложение в реальном времени, которое требует обработки, выполняемой при каждой координате, на которую пользователь перемещает свою мышь, не отбрасывая никаких событий мыши?

В JS, если мы хотим отслеживать местоположение мыши пользователя, мы по сути ограничены подключением обработчика mousemove к какому-либо элементу. К сожалению, если мы используем местоположение мыши для выполнения некоторых дорогостоящих процедур, таких как рисование динамической графики на экране через WebGL или 2D-холст, мы можем (и обычно делаем) потерять большую точность.

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

В конечном счете, поскольку JS является однопоточным, мы не можем просто запустить отдельный поток с единственной целью - собирать координаты мыши и позволить приложению обрабатывать ввод так быстро, как только может (возможно, здесь может помочь веб-работник? ). Точно так же мы не можем очень легко расставить приоритеты сбора событий мыши над обработкой, которая должна произойти, потому что мы можем быстро начать истощать сторону обработки вещей.

Есть ли какой-то подход, который я здесь пропускаю? Если все, что делает приложение, это записывает координаты мыши, вы обычно получаете очень точную запись о том, где была мышь. Проблема возникает, когда нам необходимо выполнить значительную, но не необоснованную обработку на основе этих входных данных в режиме реального времени.

Answer 1

В зависимости от того, что вы делаете, вы можете чередовать свою обработку с обработкой событий, работая немного по очереди в обработчике тайм-аута.Это дает возможность обработчикам событий срабатывать между ними.

var workInterval = 0; // or try other small values
function doABitOfWork() {
    // ... Do stuff, but don't take too long ...
    if (!finished) {
        setTimeout(doABitOfWork, workInterval);
    }
}
setTimeout(doABitOfWork, workInterval);

Я успешно использовал этот трюк, чтобы сделать страницу отзывчивой при создании тяжелой таблицы HTML.