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

jQuery

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()を作り替えるとより便利かも。
タイトルとURLをコピーしました