jQueryでのタイマー処理覚え書き

2014.5.5

jQueryでちょっと凝った事をしようと思う処理の一つにタイマー処理があると思います。いつも忘れて調べていたので、メモ。

タイマー処理コードサンプル

inertval = 5000;   //何秒毎に処理をするか（ここでは5秒）
//タイマー開始関数

function startTimer(){

//inertvalの秒数毎にsyori関数を実行する。その情報をtimer変数へ入れている。

timer = setInterval(syori, inertval);

}
//タイマー停止関数

function stopTimer(){

//timer変数を止める

clearInterval(timer);

}
//タイマー開始

startTimer();
//タイマーを停止（ここでは、要素にマウスオーバー、アウトを例にしています）

$('.element').on({

'mouseenter': function(){   //マウスオーバーしたら

stopTimer();    //止める

},

'mouseleave': function(){   //マウスアウトしたら

startTimer();   //再び動かす

}

});
function syori(){

//ここにinertvalの秒数毎の処理を記述

}

補足

• タイマーを開始する際は、自分で決めた変数（ここではtimer）にsetInterval命令を入れる。
• 止める時は、決めた変数をclearIntervalで指定する。
• setIntervalで行う処理はコードが長くなりがちなので、functionとして別に記述すると、後から見返した時に見やすくなる。
• 複数のタイマーを使う場合は、それぞれのタイマー変数を渡すように、startTimer()、stopTimer()を作り替えるとより便利かも。