Hannington Mambo Hannington Mambo - 2 months ago 20
Javascript Question

How to detect when mouse has stopped

I have written the following JavaScript code. I am using it to detect when the mouse is moving and when it has stopped. MouseStopped() function is a loop of hundreds of items that will tell me where the mouse has stopped, so I want to call it only when the mouse has stopped.

var CheckMovement;
var stopLoop = false;
var n = 0;
canvas.addEventListener('mousemove', function (evt) {
CheckMovement = setInterval(function () { HasMouseStopped(evt) }, 250);
}, false)

function HasMouseStopped(evt) {
var mousePos = getMousePos(canvas, evt);
newMouseX = mousePos.x;
newMouseY = mousePos.y;
if ((newMouseX !== mouseX) && (newMouseY !== mouseY)) {

stopLoop = true;
} else {
//stopped moving
clearInterval(CheckMovement);
stopLoop = false;
n = 0;
MouseStopped();
}
mouseX = newMouseX;
mouseY = mousePos.y;
}

function MouseStopped() {
while (arr.length > n) {
if (stopLoop) { break; }
if (ctx.isPointInPath(mouseX, mouseY)) {
//tooltip text
ctx.font = '12pt Candara';
ctx.fillStyle = 'black';
ctx.fillText(arr[n], mouseX + 10, mouseY - 5);
break;
}
n++;
}
}


Now I have the following problems:


  1. Even though I am calling
    clearInterval(CheckMovement)
    , it doesn't
    stop iterating; it is running continuously, which cause the problem of
    calling
    MouseStopped()
    multiple times. Why is it not stopping?

  2. I would like to break
    MouseStopped()
    in the middle of its operation if the mouse is moved before it completed its the loop. This is why I am setting
    stopLoop = true;
    However, that also doesn't seem to be working as intended. How can I achieve these?



Thanks.

EDITS

Answer

It's really simple: when the mouse is moved, set a timeout for XXX milliseconds in the future. Also, clear any past timeouts to reset the time. Like this in the mousemove listener

clearTimeout(timer);
timer=setTimeout(mouseStopped,300);

See this JSFiddle.

Comments