在 Jquery 中附加 div 和间隔

2022-01-22 00:00:00 append intervals jquery javascript

您好，我需要关于在通过 2 个循环使用 2 种速度间隔时附加 div 的帮助

Hi I need help regarding appending div while using 2 types of speed interval via 2 loops

这是我的示例代码

<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>

推荐答案

我已经使用了两个 interval()...但是一个函数.

I've done it using two interval()... But one function.

并使用一些变量来控制迭代和延迟(或速度).

And use some variables to control iterations and delays (or speed).

看看当它达到 300 时它是如何变慢的.

Look how it slows when it reaches 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>

相关文章