javascript - jQuery タイマーの実装

Question

データベースからメモのリストを取得し、それらをビューに表示しています。メモが 15 分未満の場合は、編集ボタンを表示して、ユーザーがメモをインライン編集して新しい情報を保存できるようにしています。私はこの部分を完全に機能させています。私は現在、15分未満のメモにタイマーを付けて、タイマーが作動しているときにボタンを非表示にしようとしています. 注: ユーザーは、15 分以内であれば複数のメモを編集できます。jQuery と Javascript にあまり慣れていないので、これを行うにはどうすればよいでしょうか? 私はこのフォーラムのことはまったく初めてなので、質問に答えるためにコードが必要かどうかわからないので、返信していただきありがとうございます。なので、見たい人がいれば上げます。

Answer 1

使用法

    var timer = $.timer(function() {
            alert('This message was sent by a timer.');
    });

    timer.set({ time : 5000, autostart : true });

    timer.set(options);
    timer.play(reset);  // Boolean. Defaults to false.
    timer.pause();
    timer.stop();  // Pause and resets
    timer.toggle(reset);  // Boolean. Defaults to false.
    timer.once(time);  // Number. Defaults to 0.
    timer.isActive  // Returns true if timer is running
    timer.remaining // Remaining time when paused

http://code.google.com/p/jquery-timer/

それはあなたの問題を解決するかもしれません..リンクの完全な記事とデモを見てください

Answer 2

まだ編集可能なメモに.editableクラスを追加し、編集できなくなったら削除します。メモの時間をdata-time="1359999066"属性に保持できます（UNIXタイムスタンプであると想定）。私が暗示したコードについてさらにサポートが必要な場合はお知らせください。

(function checkTimer() {
    $('.note.editable').each(function() {
        //check for timestamp, remove .editable and hide button
    });
    if ( $('.note.editable').length ) setTimeout(checkTimer, 5000);
})();
// this will check every 5 seconds

Answer 3

サーバー側では、作成時間を含む各メモにデータ属性を添付できます。

<div class="note" data-creation="1360000265027">
   <!-- milliseconds from 01.01.1970 (UTC) -->
   <p>My content</p>
   <button>edit</button>
</div>

これで、これが 15 分より古いかどうかを確認できます。

(function checkTimer() {
     $('.note').each(function(){
         var creation = $(this).data('creation'),
              // time in milliseconds from 01.01.1970 (UTC) minus 15min (900000milsec)
              fifteenAgo = (new Date).getTime() - 9e5;
         if (creation <= fifteenAgo) {
              $(this).find('button').remove();
         }
    });
    if ( $('.note button').length ) setTimeout(checkTimer, 5000);
})();