javascript - 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);