在 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

如前所述，

You will have to use recursion with timer to add delay in loops.

您可以检查此 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>

在 Jquery 中附加 div 和间隔

Append div with interval in Jquery

javascript

jquery

append

intervals