Posted at

clearIntervalが効かない時

More than 3 years have passed since last update.

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);
}
}