マウス停止時の検出方法

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

ありがとうございます。

EDITS

Answer 1

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

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

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