title: Wait until previous .append() is complete
body: <p>How can we make <code>append</code> wait until the previous <code>append</code> is complete. I am appending huge amount of data so the present append should check if the previous append is complete. I am able to do this by giving all the append's independently with some time delay. But practically according to my code I may have 'n' number of appends so I want to do this dynamically. </p>
  
  <p>I tried using for or while loop but the script is getting corrupted and the browser is crashing because the next append is starting before the previous append is complete.</p>
  
  <hr>
  
  <pre><code>$('#printall1').click(function() {
  $('#fourElementsonly').empty();
  var cleartable = 0;
  var maxlimit = 0;
  var presentarraycount = 0;
  $.post("/PortalUserReport/getjunkdata", null, function(response, status) {
      var report = eval(response);
      var totalRecordsCount = report.length; //6000
      var totalRecordsCountfortheLoop = totalRecordsCount;
      var arraycount = Math.ceil(totalRecordsCount / 1000);
      var reports = new Array(arraycount); // reports[6]
      for (var i = 0; i &lt; arraycount; i++) {
          $('#fourElementsonly').append('&lt;table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"&gt; &lt;/table&gt;');
      }
      reports[presentarraycount] = "";
      $.each(report, function(x) {
          if (cleartable == 0) {
              for (var i = 0; i &lt; arraycount; i++) {
                  $('#Portal_User_elements' + i).empty();
              }
              cleartable++;
          }
          if (recordnumber &lt;= totalRecordsCountfortheLoop) {
              reports[presentarraycount] += "&lt;tr style = \"height:20px;  border: 1px Solid Black\"&gt; &lt;td style = \"width:50px; text-align:center \"&gt; " + recordnumber + " &lt;/td&gt;   &lt;td style = \"width:350px;\"&gt; Name :" + report[x].FirstName + "&lt;/td&gt; &lt;td style = \"width:200px;\"&gt; UserName :" + report[x].UserName + " &lt;/td&gt; &lt;td style = \"width:200px; \"&gt; Company : " + report[x].Company + " &lt;/td&gt; &lt;/tr&gt;";
              reports[presentarraycount] += "&lt;tr style = \"height:20px;  border: 1px Solid Black\"&gt; &lt;td &gt; &lt;/td&gt; &lt;td&gt; Registration Date : &lt;label class = \"datepicker\"&gt; " + report[x].ActiveDate + " &lt;/label&gt; &lt;td&gt; User CN : " + report[x].UserCN + " &lt;/td&gt; &lt;td&gt; Status: " + report[x].Status + " &lt;/td&gt; &lt;/ td&gt;  &lt;/tr&gt;";
              reports[presentarraycount] += "&lt;tr style = \"height:20px;  border: 1px Solid Black\"&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; User Privilege : " + report[x].Privileges + " &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt;";
              maxlimit++;
              if (maxlimit == 1000) {
                  presentarraycount++;
                  reports[presentarraycount] = "";
                  maxlimit = 0;
              }
          }
          recordnumber++;
      });
      for (var i = 0; i &lt; arraycount; i++) {
         $(this).delay(1000, function() {
              $('#Portal_User_elements' + i).append(reports[i]);
         });
      }
  });
  
  });
  </code></pre>