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

Question

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

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

从 mousemove 处理程序中调用 requestAnimationFrame 有什么问题吗？

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

Answer 1

首先，this question 提供的信息非常丰富。

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

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

同样，设置一个标准的 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);

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