Question

我的实际用例是绘制一些东西（不是html，但在画布上渲染）以响应mousemove事件 - 除非鼠标改变位置，否则它实际上归结为没有什么重要的事情要做。

我看到requestAnimationFrame可以被认为是一种限制用户输入的方法，例如mousemove，我理解为什么它应该那样以及为什么它是代码气味以这种方式使用它如果mousemove - ＆gt; draw不是代码的实际目的。

从mousemove处理程序中调用requestAnimationFrame是否有任何错误？

如果我没有从mousemove处理程序调用requestAnimationFrame，并且绘图速率实际上比用户输入循环慢（首选速率或者它有效），那么在这种情况下我是否还能获得所需的限制？

Answer 1

首先，this question中提供的信息非常有用。

第二，鉴于mousemove事件可能比rAF更频繁地发射，看起来从mousemove事件调用rAF是一个坏主意，尽管事实如此它可以按照上述问题的建议加以限制。

为了响应鼠标移动而渲染，似乎更好的方法是让mousemove以它想要的方式触发并且不要试图从那里调用rAF。如果mousemove事件试图按照上面的问题建议以一个荒谬的1000Hz触发，那么处理程序唯一需要做的就是更新一些共享鼠标位置变量，并在mouseX或mouseY发生变化时设置共享标志。 / p>

同样，设置一个标准的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来执行代码，直到动画完成以执行其他操作。

mousemove - ＆gt;画画，什么是正确的方法？

2 个答案: