clearIntervalが効かない時

hoverしたらsetIntervalが始まり、条件を満たしたらclearIntervalしたかった。
しかし、短時間に何回もhoverを繰り返したときに、clearIntervalが効かなくなることがあった。
そんな時の解決策。

ページが表示されたらsetIntervalが始まり、「ストップ」をクリックしたらclearIntervalする場合

<div class="box"></div>

<div class="stop">ストップ</div>

boxAime = setInterval(boxChange, 50);

var boxWidth = 0;
function boxChange(){
    boxWidth++;
    $('.box').width(boxWidth);
}

$('.stop').click(function(){
    clearInterval(boxAime);
});

「スタート」をhoverしたらsetIntervalが始まり、条件を満たしたらclearIntervalする場合(不完全)

<div class="box"></div>

<div class="start">スタート</div>

$('.start').mouseenter(function(){
    startChange();
});

function startChange(){
    boxAime = setInterval(boxChange, 50);
}

var boxWidth = 0;
function boxChange(){
    boxWidth++;
    if(boxWidth > 100){
        clearInterval(boxAime);
    }
    $('.box').width(boxWidth);
}

連続して何回もhoverすると、止まらなくなってしまう。

「スタート」をhoverしたらsetIntervalが始まり、条件を満たしたらclearIntervalする場合(解決策)

原因は、連続してhoverしたことによって、setIntervalがいくつも実行されてしまっていたが、clearIntervalは1つしか止めていなかったからです。

clearIntervalは、引数にsetInterval実行時の戻り値を渡すことで処理を止めています。
なので、setIntervalの戻り値を全て保持し、全て止めるようにすれば良いです。

<div class="box"></div>

<div class="start">スタート</div>

$('.start').mouseenter(function(){
    startChange();
});

var arrChangeCnt = new Array();
function startChange(){
    arrChangeCnt.push(boxAime = setInterval(boxChange, 50));
}

var boxWidth = 0;
function boxChange(){
    boxWidth++;
    if(boxWidth > 100){
        if (arrChangeCnt.length > 0) {
           clearInterval(arrChangeCnt.shift());
       }
    }else{
        $('.box').width(boxWidth);
    }
}