Show each result one by one

Question

I have a code which increases a URL parameter in a while loop until $i is equal to 10. When this happens, it will display each number up to 10 (as this is when $i stops increasing) - in this case it would be 1, 2, 3, 4, 5, 6, 7, 8, 9.

The problem with this is that only when $i is equal to 10 does it show 1, 2, 3, 4, 5, 6, 7, 8, 9 - I need it to display the numbers as it happens (rather than waiting for $i to equal 10!).

<div id="here"></div>

<script>
$(document).ready(function(){
        $.ajax({
            type: "POST",
            url: "test2.php",
            success: function(data) { $("#here").html(data);  }
        });
});
</script>

test2.php:

while($content = file_get_contents('https://www.example.com?id='.$i)) {
   if($i !== 10) {
      echo $i;
   }else{
      break;
   }
   $i++;
}

Answer 1

You can alternatively request each file in sequential order using .queue(), .append()

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

$({}).queue("ajax", $.map(arr, function(item, i) {
  return function(next) {
    return $.ajax({
              type: "POST",
              url: "test2.php",
              data: {n:item}
           })
           .then(function(data) { 
             $("#here").append(data);  
             next();
           });

  }
})).dequeue("ajax")

php

if (isset($_POST["n"])) {
  $content = file_get_contents("https://www.example.com?id=" . $_POST["n"]);
  echo $content
}