mousemove triggers more often with console open?

Question

I'm experiencing something weird, but I'm not sure if it's intended or what's causing it.

I'm experimenting with some JavaScript that loops through a set of images when the user moves the mouse across the screen. I'm using jQuery mousemove for this. Here's a fiddle: https://jsfiddle.net/sy35dzeh/1/

The behaviour I'm experiencing is some kind of throttle with the mouse movement. I want every pixel moved to increment the pixelCount variable. But when moving the mouse in longer sweeps, it seems like the iteration reaches a limit. This causes the counter to increment faster when moving the mouse slowly as there are more "pixels" per movement added. I get that this might be how mousemove works, but on top of that it behaves differently when opening the developer tools.

When I open the developer tools in Chrome as try to move the mouse again, the iteration is a lot more rapid. This is the behaviour I want, when the iteration becomes slower on slower mouse movement and faster when moving the mouse faster.

Here's a video of the difference: https://streamable.com/okqql3

Any idea why it's different when I open the console and any idea how to make the mouse movement affect the iteration in the way I want it to behave (like when I have the developer tools open)?

Answer 1

I fixed it by using event.getCoalescedEvents() which get the missing "in between" movements. Note that you need to listen for "pointermove", which I was doing in my case.

 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
  }