複数タイマーカウントダウンの再組み込み問題

簡単なスクリプトか簡単なスクリプトから複数のタイマーカウントダウンを作成します。 entire code 複数タイマーカウントダウンの再組み込み問題

は問題の私は再び

をタイマーのカウントダウンを追加したいとき、私は

CODE 変数current_total_secondを宣言する必要がが起こる：

elapsed_seconds= tampilkan("#time1");

とのsetIntervalで設定した変数タイマー..

timer= setInterval(function() { 
    if (elapsed_seconds != 0){ 
     elapsed_seconds = elapsed_seconds - 1; 
     $('#time1').text(get_elapsed_time_string(elapsed_seconds)) 
    }else{ 
     $('#time1').parent().slideUp('slow', function(){ 
      $(this).find('.post').text("Post has been deleted"); 
     }) 
     $('#time1').parent().slideDown('slow'); 
     clearInterval(timer); 
    } 
}, 1000);

私は、タイマーのカウントダウンの多くを追加するとき、私はすでにスクリプトがそれを行う.. ..私はそれにflexibelityを実装したいリファクタリングについて知っているし、別の方法を試みるが、私はこのコード再ファクタリングにスタックしていました自動的にまたは動的にコードを追加する必要はありません。コードが明確で効率的になります。アドバンス

で

おかげ

出典

2011-01-13 Joko Wandiro

それは、このコードではそう...

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    <style type="text/css"> 
    body { 
     padding: 10%; 
     } 

     hr { 
     margin: 0px; 
     padding: 0px; 
     height: 6px; 
     background: black; 
     } 

     .clock { 
      margin: 0px; 
      padding: 8px 8px; 
      background-color: whitesmoke; 
      color: red;  
     } 

     .post { 
      margin: 0px; 
      padding: 8px 8px; 
      background: white; 
      /*border-bottom: 4px solid black;*/ 
     } 
    </style> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    </head> 
    <body> 
    <a class="addTimer">Add Timer</a> | Timer count: <span class="timerCount">0</span><span class="info"></span> 
    <div class="container"> 
    </div>  
    </body> 

    <script type="text/javascript"> 
    function get_elapsed_time_string(total_seconds) { 
     function pretty_time_string(num) { 
     return (num < 10 ? "0" : "") + num; 
     } 

      var hours = Math.floor(total_seconds/3600); 
      total_seconds = total_seconds % 3600; 

      var minutes = Math.floor(total_seconds/60); 
      total_seconds = total_seconds % 60; 

      var seconds = Math.floor(total_seconds); 

      hours = pretty_time_string(hours); 
      minutes = pretty_time_string(minutes); 
      seconds = pretty_time_string(seconds); 

      var currentTimeString = hours + ":" + minutes + ":" + seconds;   
      return currentTimeString; 
    } 

    $(function() { 
     var timer = null; 
     var timerCount = 0; 

     $(".addTimer").click(function(e) { 
     $("<hr /><div class=\"timer\" data-remaining=\"10\" data-expired=\"0\"><div class=\"clock\">00:00:10</div><div class=\"post\">Lorem Ipsum</div></div>").appendTo($(".container")); 

     timerCount++; 
     $(".timerCount").text(timerCount); 

     if (timer === null) { 
      $(".info").text(" | ticker created"); 
      timer = setInterval(function() { 
      $(".container > .timer").each(function() { 
       var remainingSeconds = parseInt($(this).attr("data-remaining"), 10); 
       if (remainingSeconds > 1) { 
       remainingSeconds--; 
       $(this).attr("data-remaining", remainingSeconds); 
       $(this).find(".clock").text(get_elapsed_time_string(remainingSeconds)); 
       } else { 
       if ($(this).attr("data-expired") === "0") { 
        remainingSeconds--; 
        $(this).attr("data-remaining", remainingSeconds); 
        $(this).find(".clock").text(get_elapsed_time_string(remainingSeconds)); 
        $(this).slideUp("slow", function() { 
        $(this).find(".post").text("Post has been deleted"); 
        $(this).slideDown("slow"); 
        $(this).attr("data-expired", "1"); 

        timerCount--; 
        $(".timerCount").text(timerCount); 

        if (timerCount === 0) { 
         $(".info").text(" | ticker destroyed"); 
         clearInterval(timer); 
         timer = null; 
        } 
        }); 
       } 
       } 
      }); 
      }, 1000); 
     } else { 
      $(".info").text(" | using existing ticker"); 
     } 
     }); 


    }); 
    </script> 
</html>

のような単一のタイマーを使用して、おそらく、より効率的で、私は、すべての時間（のみ1のsetInterval）で実行されている1つのティッカーを持っており、データ属性を使用して、各タイマーの残り時間を記録し、タイマーの期限が切れているかどうかを確認します。このようにして、タイマーに関するすべての必要なメタデータがタイマー自体に含まれているので、必要な数だけタイマーを追加できます。

各ティックでは、既存の各タイマーを調べ、そのデータの残りの属性を調べ、それに応じてタイマーdivを更新します。有効期限が切れている場合は、アニメーションを行います。すべてのタイマーが完了したら、間隔をクリーンアップします。

はここに...それを

出典

2011-01-13 03:53:40

ライブの例を試してみて：http://jsfiddle.net/jchandra/ZguX8/ –

感謝のジミー...あなたのコードは私が私の複数のタイマーのカウントダウンを行い想像します –

複数タイマーカウントダウンの再組み込み問題

答えて

関連する問題