等到之前的 .append() 完成 [英] Wait until previous .append() is complete

问题描述

我们怎样才能让 append 等到前一个 append 完成.我正在附加大量数据，因此当前附加应检查前一个附加是否完整.我可以通过在一定时间延迟下独立提供所有附加来做到这一点.但实际上根据我的代码，我可能有n"个附加，所以我想动态地执行此操作.

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.

我尝试使用 for 或 while 循环，但脚本已损坏并且浏览器正在崩溃，因为下一个附加是在前一个附加完成之前开始的.

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]);
       });
    }
});

});

推荐答案

以下解决方案适用于所有浏览器，尤其是 IE6.Firefox 的响应时间是 10 秒，而 IE6 的响应时间是 2 分 30 秒.

The below solution is working on all the browsers especially IE6. The response time in Firefox is 10 sec, but in IE6 it is 2 min 30 sec.

$('#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);// we have 6000 records in the report now
        var totalRecordsCount = report.length; // count = 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++) {
            $('#Portal_User_elements' + i).append(reports[i]);
        }
    });
});

这篇关于等到之前的 .append() 完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！