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++; } } |
现在我有以下问题:
停止迭代;它持续运行,这导致了问题
多次调用
谢谢。
编辑
这非常简单:移动鼠标时,请将超时设置为XXX毫秒。另外,清除所有过去的超时以重置时间。在mousemove监听器中是这样的
1 2 | clearTimeout(timer); timer=setTimeout(mouseStopped,300); |
请参阅此JSFiddle。
经过一番思考,我认为