タイマー

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのtimers()プラグインを利用して各種イベントを登録します。 「Unbounded everyTime」では、everyTime()メソッドを使用して１秒間隔でカウントします。結果はp要素に格納して表示します。 「Controlled everyTime」では、[start]と[stop]でイベントをコントロールします。 [start]をクリックしたときは、everyTime()メソッドで１秒間隔でイベントを発生 させてli要素(New One)を追加します。[stop]をクリックするとstopTime()メソッドを実行してイベントを終了させます。

このサンプルは、jQueryのtimers()プラグインを利用して各種イベントを登録します。 「Unbounded everyTime」では、everyTime()メソッドを使用して１秒間隔でカウントします。結果はp要素に格納して表示します。 「Controlled everyTime」では、[start]と[stop]でイベントをコントロールします。 [start]をクリックしたときは、everyTime()メソッドで１秒間隔でイベントを発生 させてli要素(New One)を追加します。[stop]をクリックするとstopTime()メソッドを実行してイベントを終了させます。 

var demos = $("div.wrapper div.demos");

var active = false;

$('.controlled-interval', demos)
  .find('.start')
  .css("cursor", "pointer")
  .click(function() {
    if (!active) {
      active = !active;
      $(this).parents("div")
      .find('ul').everyTime(1000, 'controlled', function() {
        $(this).append("<li>New One</li>");
      });
    }
  })
  .end()
  .find('.stop')
  .css("cursor", "pointer").click(function() {
    if (active) {
      active = !active;
      $(this).parents("div").find('ul').stopTime('controlled');
    }
  });

  $(".uncontrolled-interval p", demos)
    .everyTime(1000, function(i) {
      $(this).html(i);
    });