javascript - 如何检测鼠标何时停止

Question

我编写了以下 JavaScript 代码。我用它来检测鼠标何时移动以及何时停止。MouseStopped() 函数是一个包含数百个项目的循环，它会告诉我鼠标在哪里停止，所以我只想在鼠标停止时调用它。

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++;
    }
}

现在我有以下问题：

1. 即使我在打电话clearInterval(CheckMovement)，它也不会停止迭代；它一直在运行，导致MouseStopped()多次调用的问题。为什么停不下来？
2. 如果鼠标在完成循环之前移动，我想 MouseStopped()在其操作中间中断。这就是我设置的原因stopLoop = true;但是，这似乎也没有按预期工作。我怎样才能实现这些？

谢谢。

编辑

Answer 1

真的很简单：当鼠标移动时，设置超时时间为 XXX 毫秒。此外，清除任何过去的超时以重置时间。像这样在 mousemove 监听器中

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

请参阅此JSFiddle。

Answer 2

经过一番思考，我认为该debounce功能可能满足您的需求。Lodash.js 提供了它。