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()を作り替えるとより便利かも。