.each（）使页面冻结

The idea is to fetch the content from an external PHP file on Page load using jQuery .each() function. The problem is the page freezes or keeps on loading and never ends. What would be the issue?

PHP Page

<div class='caller-div-holder'>

    <div class='calling-div' id='calling-div-1'></div>

    <div class='calling-div' id='calling-div-2'></div>

    <div class='calling-div' id='calling-div-3'></div>

</div>

In the .js file

$('.calling-div').each(function()
{
   var fetch_id=$(this).attr('data-id');
   $.ajax(
   {
     type: "POST",
     url: "page-url",
     data: {var1: fetch_id},
     dataType:"html",
     success: function(data)
     {
       $('#calling-div-'+fetch_id).html(data);
     }
   }); // Ajax
}); // Each function

Note:

1. Instead of $.ajax() on using document.write I found that the function is called for 3 times correctly with the variable fetch_id getting the data properly.

2. The external PHP page is checked with sample data just changing the POST to GET and passing the data through GET method. It works.

Edit 1:

Adding async:"false", reduces the problem intensity. But still the page is considerably slow.

The following will solve the issue by adding all the html at once, this will be faster than the other method...it will still lock the DOM at the end when it adds the html variable to the html of the parent element.

var html = '';

$('.calling-div').each(function()
{
   var fetch_id=$(this).attr('data-id');
   $.ajax(
   {
     type: "POST",
     url: "page-url",
     data: {var1: fetch_id},
     dataType:"html",
     success: function(data)
     {
         html += "<div class='calling-div' id='calling-div-" + fetch_id + "'>" + data + "</div>"
     }
   }); // Ajax
}); // Each function

$('.caller-div-holder').html(html);

Special Note I highly recommend using the following to solve this problem:

jQuery append() for multiple elements after for loop without flattening to HTML

http://jsperf.com/fn-append-apply