mousemove -> 绘制，正确的方法是什么？

Question

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

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

从 mousemove 处理程序中调用 requestAnimationFrame 一定有什么错误吗？

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

Answer 1

这将向您展示 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);

它还在 mousedown 上以 'mousemove' 标题触发，但除此之外，它还会记录您可以查看的时间以确定您需要了解的内容。虽然这段代码没有演示，但您可以使用 requestAnimationFrame 来阻止代码的执行，直到动画完成以执行其他操作。

Answer 2

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

其次，鉴于 mousemove 事件可能比 rAF 更频繁地触发，似乎从 mousemove 事件调用 rAF这是一个坏主意，尽管事实上它可以按照上述问题中的建议进行限制。

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

同样，设置一个标准的 rAF 循环并让它运行以它的首选速率，同时从 rAF 回调中，检查标志以查看鼠标是否已移动，如果有则将有要渲染的东西，如果没有，则什么也不做。

这样两个进程就不会试图相互控制，而且代码更清晰，更有意义。

mousemove -> 绘制，正确的方法是什么？

mousemove -> draw, what's the right way?

javascript

mousemove

requestanimationframe