打开控制台时，鼠标移动会更频繁地触发吗？

Question

我遇到了一些奇怪的事情，但我不确定它是否是故意的或是什么原因造成的。

我正在尝试一些 JavaScript，当用户在屏幕上移动鼠标时，它会循环显示一组图像。我mousemove为此使用 jQuery。这是一个小提琴： https: //jsfiddle.net/sy35dzeh/1/

我遇到的行为是鼠标移动的某种限制。我希望移动每个像素来增加pixelCount变量。但是当鼠标移动更长的扫描时，迭代似乎达到了极限。当缓慢移动鼠标时，这会导致计数器增加得更快，因为每次移动会添加更多“像素”。我知道这可能是mousemove工作原理，但最重要的是，打开开发人员工具时它的行为有所不同。

当我在 Chrome 中打开开发者工具并尝试再次移动鼠标时，迭代速度快得多。这是我想要的行为，当鼠标移动较慢时迭代变慢，而鼠标移动较快时迭代变快。

这是差异的视频： https: //streamable.com/okqql3

知道为什么当我打开控制台时情况有所不同吗？知道如何让鼠标移动以我希望的方式影响迭代（就像当我打开开发人员工具时）吗？

Answer 1

我通过使用event.getCoalescedEvents()which get 缺失的“中间”动作来修复它。请注意，您需要监听“pointermove”，这是我在我的例子中所做的。

 this.canvas.addEventListener('pointermove', this.onMouseMove.bind(this), { passive: true });

 onMouseMove(event) {
    const events = event.getCoalescedEvents();
    for (let i = 0; i < events.length; i++) this.onMovement(events[i]);
  }

  onMovement(event) {
    // standard processing
  }