How to track when mousemove ends

Question

I would like to call a function when mousemove ends.

I have an onmousemove event listener like below which fires too many times:

window.onmousemove = (e) => { console.log(e) }

I would like to reduce calling the function too often to prevent high load.

For example, call the function once when the cursor stops.

If the are any other solutions I will be glad to try them as well.

Does this answer your question? [How to detect when mousemove has stopped](https://stackoverflow.com/questions/15066849/how-to-detect-when-mousemove-has-stopped) — angel.bonev, Mar 01 '21 at 12:59

blaumeise20 · Answer 1 · 2021-03-01T14:27:18.070

1

There is no way of directly doing it. But you could try this:

var timeout;
element.onmousemove = function (e) {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(function() {
        // do your stuff here
    }, 200);
}

It will fire if there is no event detected for 200 milliseconds.

edited Mar 01 '21 at 14:27

answered Mar 01 '21 at 13:00

blaumeise20

2,148
8
26

Thanks. It looks awesome. Will give it a try! – Systems Rebooter Mar 01 '21 at 13:01
2

you forgot to assign `timeout` – Nick Parsons Mar 01 '21 at 13:04
Am I right that it still fires the **same** number of events, but just timeouts them? – Systems Rebooter Mar 01 '21 at 13:12
No, it clears the timeout on every event. – blaumeise20 Mar 01 '21 at 14:22
@SystemsRebooter please try it now, I fixed an error. – blaumeise20 Mar 01 '21 at 16:30

score 1 · Answer 2 · answered Mar 01 '21 at 13:07

You can wrap your event callback in a debounce function. This wrapping function will only get called if you stop for 1/4 of a second after you start moving the mouse. If you start moving within 250 milliseconds after stopping, the timeout will reset and wait till you stop again.

const debounce = function(func, wait, immediate) {
  let timeout;
  return function() {
    const
      context = this,
      args = arguments,
      later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      },
      callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

const onMouseMove = (e) => {
  console.log(`Stopped position: (${e.clientX}, ${e.clientY})`);
};

const debounceMouseMove = debounce(onMouseMove, 250); // 1/4 of a second

document.addEventListener('mousemove', debounceMouseMove);

How to track when mousemove ends

2 Answers2