Question

For some feature, I am working on mousemove event. The mousemove event listener is invoked a number of times within a single linear mouse gesture that is not required. I need to implement a custom event that will be invoked when the mouse stops its motion. I have a guess that it can be implemented on top of mousemove with some delay feature.

Please help me in this regard.

Answer 1

You’re most of the way there:

function waitForMouseStop(callback) {
    var timer;

    function stoppedMoving(evt) {
        document.onmousemove = null;
        callback();
    }

    function moveHandler(evt) {
        evt = evt || window.event;
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout(function() {
            stoppedMoving(evt);
        }, 500);
    }

    document.onmousemove = moveHandler;
}

waitForMouseStop(function() {
    alert("Stopped");
});