[jQuery] 処理を一定の間隔で繰り返し実行する方法

この記事では、「jQuery Timers」というプラグインを使って、特定の処理を定期的に実行する方法を紹介します。同プラグインはjQuery Timersのサイトの、「unpacked javascript」というリンクから取得することができます。

jQuery Timersの活用例を作成しました!!こちらの記事をご確認いただくと、動作をイメージしやすくなると思います。

jQuery Timersの使い方

jQuery Timersには「everyTime」というメソッドが用意されており、これを使うと一定の間隔で処理を繰り返すことができます。また、「stopTime」メソッドを呼ぶことで繰り返している処理を停止することができます。

[Object].everyTime([繰り返す間隔(ミリ秒)], 関数);
[Object].stopTime();

例えば、10秒毎に「こんにちは」という文字を表示させるには、

$("body").everyTime(10000, function() {
  alert("こんちには");
});

で、

$("body").stopTime();

で停止することができます。

他にも、一定の時間後に、一度だけ処理を実行する「oneTime」メソッドも用意されています。例えば、

$("body").oneTime(10000, function() {
  alert("はじめまして");
});

と書けば、画面表示して10秒後に「はじめまして」とさせることができます。

最後に簡単なサンプルを載せておきます。

sample.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery Timersのサンプル</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="jquery.timers.js"></script>
    <script src="sample.js"></script>
  </head>
  <body>
    <header>
      <h1>jQuery Timersのサンプル</h1>
    </header>
    <div>
      <span class="label">メッセージ</span><input type="text" id="msg" value="追加メッセージ" />
    </div>
    <div>
      <span class="label">間隔</span><input type="text" id="interval" value="1" size="3" />(秒毎)
    </div>
    <ul id="buttons">
      <li><button type="button" id="start">開始</button></li>
      <li><button type="button" id="stop">停止</button></li>
      <li><button type="button" id="onetime">1回実行</button></li>
    </ul>
    <p>メッセージリスト</p>
    <ul id="msgs">
    </ul>
  </body>
</html>

sample.js

$(function() {
  var msg = $("#msg").val();
  var msgs = $("#msgs");
  $("button#start").click(function() {
    $(this).everyTime($("#interval").val() * 1000, function() {
      msgs.append("<li>[evreytime]" + msg + "</li>");
    });
  });

  $("button#stop").click(function() {
    $("button#start").stopTime();
  });

  $("button#onetime").click(function() {
    $(this).oneTime($("#interval").val() * 1000, function() {
      msgs.append("<li>[onetime]" + msg + "</li>");
    });
  });
});

サンプルのリンク  ※jQuery Timers本体は含まれておりません。サンプルを起動する時は、jQuery Timersのサイトからプラグインをダウンロードし、同じディレクトリに配置してください。

この記事が役に立った場合、シェアしていただけると励みになります!!