在jQuery中以時間間隔追加div

Question

嗨，我需要有關通過2個循環使用2種速度間隔類型時附加div的幫助

這是我的示例代碼

<script type="text/javascript">
    $(document).ready(function() {
     for (var i = 0; i <= 300; i++) {
        $(".wrapper").append("<div class='item' id='" + i + "'>" + i + "</div>");
        if (i==300) 
        {
             //I need this for loop to slow down my 
             //interval so div will display slower compared to the first 300
             for (var i = 300; i <= 500; i++) {
                $(".wrapper").append("<div class='item' id='" + i + "'>" + i + "</div>");
              };
        }
      };

    });
    var step = 0;

    function hideItemFunc() {
      var interval = setInterval(function() {
        $("#" + step).animate({
          opacity: 1
        }, 50);
        step += 1;
      }, 50);
    }
</script>

Answer 1

我已經使用兩個interval()完成了它……但是一個功能。

並使用一些變量來控制迭代和延遲（或速度）。

看看當達到300時它會如何減速。

 $(document).ready(function(){ var intervalSpeed = 20 // in milliseconds var ratio_1=1; // 1 is 100% of the above delay var ratio_2=10; var animateSpeed=300; // in milliseconds var i=0; function twoSpeedInterval(){ // Append. $(".wrapper").prepend("<div class='item' id='" + i + "'>" + i + "</div>"); // Animate. $("#" + i).animate({opacity: 1},animateSpeed); // Condition to slow or stop. if (i==300){ clearInterval(interval_1); // Stop the 1st interval. // Start 2nd interval. interval_2 = setInterval(twoSpeedInterval,intervalSpeed*ratio_2); animateSpeed = animateSpeed*ratio_2; } if (i==500){ clearInterval(interval_2); // Stop the 2nd interval. } i++; } // Start 1st interval. var interval_1 = setInterval(twoSpeedInterval,intervalSpeed*ratio_1); var interval_2; }); 

 .item{ opacity:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"></div> 

Answer 2

只要有與它一點樂趣，我用jQuery的.queue()這和做i一個全局變量。

 var i = 0; $(document).ready(function() { for (i = 0; i <= 300; i++) { $(".wrapper").append("<div class='item' id='" + i + "'>" + i + "</div>"); } for (j = 300; j <= 500; j++) { $(".wrapper").delay(1000).queue(function(next) { $(this).append("<div class='item' id='" + i + "'>" + i + "</div>"); i++; next(); }); } }); var step = 0; function hideItemFunc() { var interval = setInterval(function() { $("#" + step).animate({ opacity: 1 }, 50); step += 1; }, 50); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="wrapper"></div> 

Answer 3

如前所述

您將不得不使用帶有計時器的遞歸來增加循環延遲。

您可以將此JSFiddle作為示例進行檢查，也可以使用以下代碼段進行調試：

注意：請注意count%3 === 0每個值的延遲差異。

 var count = 0; function animate(delay) { setTimeout(function() { var div = $('<div class="tile" style="display: none">'+count+'</div>'); $('.content').append(div) div.fadeIn() if (++count < 10) { animate(count % 3 === 0 ? 3000 : 1000) } }, delay || 1000) } animate(); 

 .tile { height: 40px; margin: 5px; border: 2px solid #ddd; border-radius: 4px; background: #eee; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="content"></div>