13

次の 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;、それも意図したとおりに機能していないようです。どうすればこれらを達成できますか?

ありがとう。

編集

4

2 に答える 2

21

それは本当に簡単です: マウスが動かされたとき、将来の XXX ミリ秒のタイムアウトを設定します。また、過去のタイムアウトをクリアして時間をリセットします。mousemoveリスナーでこのように

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

このJSFiddleを参照してください。

于 2013-10-09T03:22:28.840 に答える