Append div with interval in Jquery

Question

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

Here is my sample code

<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

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

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

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>

Answer 2

Just having a bit fun with it, I used jQuery .queue() for this and made i a global variable.

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

As commented before,

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

You can check this JSFiddle as a sample or use following snippet to debug:

Note: Please note the difference in the delay for every value where 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>