关于javascript:如何检测鼠标何时停止

How to detect when mouse has stopped

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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++;
    }
}

现在我有以下问题:

  • 即使我正在呼叫clearInterval(CheckMovement),它也不会
    停止迭代;它持续运行,这导致了问题
    多次调用MouseStopped()。为什么不停止?
  • 如果要在完成循环之前移动鼠标,我想在操作的中间中断MouseStopped()。这就是为什么我要设置stopLoop = true;的原因。但是,这似乎也没有按预期工作。如何实现这些目标?
  • 谢谢。

    编辑


    这非常简单:移动鼠标时,请将超时设置为XXX毫秒。另外,清除所有过去的超时以重置时间。在mousemove监听器中是这样的

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

    请参阅此JSFiddle。


    经过一番思考,我认为debounce函数可能会满足您的需求。 Lodash.js提供了它。