mousemove -> нарисовать, как правильно?

Question

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

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

Есть ли что-то обязательно неправильное с вызовом requestAnimationFrame из обработчика mousemove?

Если я не вызываю requestAnimationFrame из обработчика mousemove, а скорость рисования на самом деле медленнее, чем входной цикл пользователя (предпочтительная скорость или, тем не менее, она работает), я все же получаю требуемое регулирование в этом случае?

Answer 1

Во-первых, информация, представленная в this question, была очень информативной.

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

С целью визуализации в ответ на движение мыши кажется, что лучший подход заключается в том, чтобы позволить mousemove срабатывать так, как он хочет, и НЕ пытаться называть rAF оттуда. Если событие mousemove пытается срабатывать на нелепой 1000 Гц, как было предложено в вышеупомянутом вопросе, единственное, что нужно сделать обработчику - это обновить пару общих переменных позиции мыши и установить общий флаг, если изменились мышь или мышь.

Аналогичным образом настройте стандартную петлю rAF и позвольте ей работать с ее предпочтительной скоростью, а при обратном вызове rAF отметьте флаг, чтобы увидеть, была ли перемещена мышь, если она есть, тогда будет что-то визуализировать, если нет, тогда ничего не делайте.

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

Answer 2

Это покажет вам разницу mousemove и анимации:

var doc = document, c = doc.getElementById('canvasId'), d = c.getContext('2d'), b = c.getBoundingClientRect(); 
function logTime(title){ 
    var dt = new Date; 
    console.log(title+': '+dt.toLocaleDateString()+' '+dt.toTimeString().replace(/\s.*/, '')+'.'+dt.getMilliseconds()); 
} 
function draw(e){ 
    logTime('mousemove'); 
    requestAnimationFrame(function(){ 
    logTime('requestAnimationFrame'); 
    }); 
    var x = e.clientX - b.left, y = e.clientY - b.top; 
    d.fillRect(x, y, 1, 1); 
} 
c.addEventListener('mousedown', function(e){ 
    draw(e); c.addEventListener('mousemove', draw); 
}); 
function stop(){ 
    c.removeEventListener('mousemove', draw); 
} 
doc.addEventListener('mouseup', stop); 

Это также обжиг с 'mousemove' названием на mousedown, но кроме того, что он записывает время вы можете посмотреть на то, чтобы определить, что вам нужно знать. Хотя этот код не демонстрирует этого, вы можете использовать requestAnimationFrame, чтобы продержаться над выполнением кода, пока анимация не завершится, чтобы сделать что-то еще.