How to detect when mousemove has stopped

Question

How is it possible to detect with an eventListener when mousemove has finished?

document.AddEventListener('mousemove', startInteractionTimer, false);  function startInteractionTimer(){   clearInterval(touchInterval);   touchInterval = setInterval(noAction, 6000); } 

I want to start the function startInteractionTimer immediately after the mousemove has ended and I would like to catch that. On the code example above, it is starting if the mouse is moved.

Thanks

Edit: Alright, I answered my own question and the script above --^ is just fine.

Answer 1

You could always make a custom event for it:

(function ($) {     var timeout;     $(document).on('mousemove', function (event) {         if (timeout !== undefined) {             window.clearTimeout(timeout);         }         timeout = window.setTimeout(function () {             // trigger the new event on event.target, so that it can bubble appropriately             $(event.target).trigger('mousemoveend');         }, 100);     }); }(jQuery)); 

Now you can just do this:

$('#my-el').on('mousemoveend', function () {     ... }); 

Edit:

Also, for consistency with other jQuery events:

(function ($) {     $.fn.mousemoveend = function (cb) {         return this.on('mousemoveend', cb);     }); }(jQuery)); 

Now you can:

$('#my-el').mousemoveend(fn);