jQuery〜マウスの移動が終わったら何か行う：mousemoveの応用

「マウスを動かしている間だけ何かを実行して、マウスの移動が終了すると何かの実行を止めたい」
例えば、マウスを移動している時だけ背景を「青色」にしてマウスを止めたら「ピンク色」にするということです。
この案件、簡単に実現できそうですが、結構難儀します。

マウスの移動を感知するイベントはmousemove(fn)を使えば良いのですが、mousemove(fn)ではマウスが1px移動するごとに発生してしまいます。つまり、マウスが移動する間隔を感知するのではなく、移動する間中無数のイベントが発生するものです。

次の例は、マウスを移動している時だけ背景を「青色」にしてマウスを止めたら「ピンク色」にするサンプルです。
デモを見ていただければわかると思いますが、mousemove(fn)を使っただけではマウスがピンクの領域に入るといきなり青色に変わりそれ以降は変化がありません。

サンプルデモ
HTMLコード

<p class="x_point">x座標</p>
<p class="y_point">y座標</p>
<p class="bool">判定</p>
<div class="box"></div>

CSSコード

.box{
  width:90%;
  height:600px;
  background-color: pink;
}

jQueryコード

$('.box').on('mousemove',function(e){
    $('.bool').text('判定：move');
    $('.box').css('background-color','blue');         
})

マウスの移動が終わった事を感知する方法

マウスを移動している時だけ背景を「青色」にしてマウスを止めたら「ピンク色」にするには座標を取得したり、タイマーを活用するなど工夫が必要になります。

mousemove(fn)で、ある時点のマウスの座標を取り続けます。setTimeout()を使って0.1秒後のマウスの座標を取り
最初に取得した座標と0.1秒後の座標を比較して同じなら停止したと判定する仕組みです。
コードにすると以下のようになります。

参考サンプルデモ
jQueryコード

var x;
var y;
$('.box').on('mousemove',function(e){
　　var tId = 0;
　　$('.x_point').text('x座標：' + e.pageX);//マウスのx座標
　　$('.y_point').text('y座標：' + e.pageY);//マウスのy座標
　　clearTimeout(tId);
　　x=e.pageX;
　　y=e.pageY;
　　tId = setTimeout(function(){
 　　if(x==e.pageX || y==e.pageY){
 　 　　$('.bool').text('判定：stop');//マウスが止まった時に表示
  　　　$('.box').css('background-color','pink');//背景色をピンクにする
 　　}else{
   　　$('.bool').text('判定：move');//マウスが移動している時に表示
   　　$('.box').css('background-color','blue');//背景色を青にする
 　}               
 }, 100)
})

mousemove(fn)イベントは結構負荷がかかりますので、できればあまり使いたくないものですね。