在 Jquery 中附加 div 和间隔答案

【问题标题】：Append div with interval in Jquery在 Jquery 中附加 div 和间隔
【发布时间】：2017-10-31 18:37:02
【问题描述】：

您好，我需要关于在通过 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>

【问题讨论】：

循环不会等待。您将不得不使用带有超时的递归
为此，您必须在 javascript 中使用超时功能
第一个或第二个循环的超时时间在哪里？ @Rajesh
@MartneyAcha 我的意思是你必须创建一个使用递归来模拟循环的结构。这样，您可以在 2 次迭代之间添加延迟。如果你能创建一个 JSFiddle，我可以告诉你怎么做
这是 OP 问题中有趣的速度变化。

标签： javascript jquery append intervals

【解决方案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>

【讨论】：

你测试了吗？ ratio = 2 将不会更新延迟。
那么intervalSpeed*ratio 是什么意思？
只执行第一次。延迟不是每次都计算的。因此，您将不得不销毁并重新创建超时。请尝试创建一个 JSFiddle 并对其进行调试。

【解决方案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>

【讨论】：

【解决方案3】：

如前所述，

您必须使用带计时器的递归来增加循环延迟。

您可以查看此JSFiddle 作为示例或使用以下sn-p 进行调试：

注意：请注意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>

【讨论】：

注意，这不是答案。仅供参考。