こんにちはWEbエンジニアのtakaです。

webアプリを作成していると、ちょくちょく出てくるタイマー処理。
今回の記事では、jQueryでタイマー処理を実行する方法をサンプルコード付きで詳しく解説していく！

タイマー処理の方法

jQueryではタイマー処理を実行するのにsetTimeoutメソッドとsetIntervalメソッドがあります。

• setTimeout ・・・ 指定した時間経過後に一度だけ処理を実行する
• setInterval ・・・ 指定した時間ごとに繰り返し特定の処理を実行する

指定した時間経過後に一度だけ処理を実行する（setTimeout）

setTimeoutメソッドを利用することで、時間経過後に一度だけ処理を行うことができます。

$(function(){
  setTimeout(function(){
   console.log('1秒後に1度だけ実行される処理');
  }, 1000); // 1000ms == 1秒
});

$.when(
  console.log('処理1'), // カンマであることに注意
  console.log('処理2')
).done(function(){
  console.log('処理1・処理2の処理後に実行したい処理');
});

指定した時間ごとに繰り返し特定の処理を実行する（setInterval）

setIntervalメソッドを利用することで、指定した時間ごとに繰り返し特定の処理を行うことができます。

$(function(){
  setInterval(function(){
    console.log('1秒毎に繰り返し実行される処理');
  }, 1000);
});

毎秒、現在時刻の表示をしたい場合

setIntetvakメソッドとDateオブジェクトで取得した現在時刻を1秒毎にpタグに出力します。

// HTML
<p id="now"></p>

// JavaScript
$(function(){
  setInterval(function(){
    var now = new Date();

    $('#now').text(now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds());
  },1000);
});

出力結果

現在時刻

まとめ

本記事では、タイマー処理の方法を解説しました。
setTimeoutメソッドは指定した時間経過後に一度だけ処理を実行でき、setIntervalメソッドは指定した時間ごとに繰り返し特定の処理を実行できるのですね。

良い開発ライフを！