jquery - Wait until previous .append() is complete

Question

How can we make append wait until the previous append 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.

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.

---

$('#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 < arraycount; i++) {
        $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>');
    }
    reports[presentarraycount] = "";
    $.each(report, function(x) {
        if (cleartable == 0) {
            for (var i = 0; i < arraycount; i++) {
                $('#Portal_User_elements' + i).empty();
            }
            cleartable++;
        }
        if (recordnumber <= totalRecordsCountfortheLoop) {
            reports[presentarraycount] += "<tr style = "height:20px;  border: 1px Solid Black"> <td style = "width:50px; text-align:center "> " + recordnumber + " </td>   <td style = "width:350px;"> Name :" + report[x].FirstName + "</td> <td style = "width:200px;"> UserName :" + report[x].UserName + " </td> <td style = "width:200px; "> Company : " + report[x].Company + " </td> </tr>";
            reports[presentarraycount] += "<tr style = "height:20px;  border: 1px Solid Black"> <td > </td> <td> Registration Date : <label class = "datepicker"> " + report[x].ActiveDate + " </label> <td> User CN : " + report[x].UserCN + " </td> <td> Status: " + report[x].Status + " </td> </ td>  </tr>";
            reports[presentarraycount] += "<tr style = "height:20px;  border: 1px Solid Black"> <td> </td> <td> User Privilege : " + report[x].Privileges + " </td> <td> </td> </tr>";
            maxlimit++;
            if (maxlimit == 1000) {
                presentarraycount++;
                reports[presentarraycount] = "";
                maxlimit = 0;
            }
        }
        recordnumber++;
    });
    for (var i = 0; i < arraycount; i++) {
       $(this).delay(1000, function() {
            $('#Portal_User_elements' + i).append(reports[i]);
       });
    }
});

});

Answer 1

Unfortunately, the jQuery append() function does not include a callback. There is no way to really check for completion of it, as it supposedly happens immediately.

See Here for some info on how to use append efficiently. What it pretty much gets at is you can try to get all of your text into one variable and simply use append once.

[update] Since you have all your data in a JSON object from the get go, just do your looping through and put it all in a variable, then just append that once you're finished. [/update]