Question

我们如何让append等到上一个append完成。我附加了大量数据，因此当前附加应检查前一个附加是否完整。我能够通过给予所有附加物独立的一些时间延迟来做到这一点。但实际上根据我的代码我可能有'n'个附加，所以我想动态地这样做。

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

$('#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

不幸的是，jQuery append()函数不包含回调。没有办法真正检查它的完成情况，因为它应该立即发生。

See Here了解有关如何有效使用追加的一些信息。你可以尝试将所有文本放到一个变量中，只需使用一次附加。

[update]由于你在get a go中拥有JSON对象中的所有数据，只需循环遍历并将其全部放入变量中，然后只需在完成后追加即可。 [/更新]

Answer 2

我可以给你一些关于如何改进代码的提示。

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

可以成为：

   var html = '';  
   for (var i = 0; i < arraycount; i++) {
       html += '<table border = "1" id = "Portal_User_elements' + i + '" class="portalUserElements"> </table>';
    }
    $('#fourElementsonly').append(html);

你将完成：

少了999次选择'#fourElementsonly'
如果您在类“portalUserElements”中添加样式，则需要注入的代码较少：
边界崩溃：崩溃;宽度：800像素;保证金：0像素;填充：0像素;边框颜色：黑色

这意味着您还可以：

   for (var i = 0; i < arraycount; i++) {
        $('#Portal_User_elements' + i).empty(); 
    }

成为（没有循环！）：

   $('.portalUserElements').empty();

和

for (var i = 0; i < arraycount; i++) {
    $('#Portal_User_elements' + i).append(reports[i]);
}

可能成为：

$('.portalUserElements').each(
     function(i) {
         $(this).append(reports[i]);
     }
);

修改：建议进行这些更改以提高算法效果，同时保持其提供的完整功能。
您可能希望压缩单个字符串变量（包括表）中的所有内容并将其附加到末尾在他的一个答案中查看Russ Cam建议你的文章。

Answer 3

笨重的方式......

一个函数（现有函数）处理所有追加。跟随追加的代码包含在一个新函数“kickOffTheRestOfTheProcess”中。

在所有初始附加内容之后，添加一个最终附加内容。它将不会被执行直到所有其他人。

$('body')).append("<script>kickOffTheRestOfTheProcess();</script>");

这对我有用。

Answer 4

根据animuson的回答，我发现这个解决方案非常优雅......

$(".selector").append(content).append(function() { /*code goes here to run*/ });

Answer 5

非常简单：）

使用时功能。

$('<div id="appendedItem">Here</div>').appendTo("body");
$.when( $("#appendedItem").length > 0).then(function(){
    console.log( $("#appendedItem").length );
});

Answer 6

您是在追加不同的元素还是单个元素？如果您要附加到单个元素，则可能更容易连接所有数据并作为一个块追加。

此外，数据来自哪里？如果数据是静态的（非ajax），那么你应该可以调用

$('selector').append(data1).append(data2).append(data3);

Answer 7

以下解决方案适用于所有浏览器，尤其是IE6。 Firefox中的响应时间为10秒，但在IE6中则为2分30秒。

$('#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]);
        }
    });
});

Answer 8

也许另一种方法可能就是在轮询函数中简单地检查你要追加的容器的innerHTML的长度是否等于最后一块内容的长度。

如果不附加，如果是这样追加。

Answer 9

建立在上面的家伙的答案上我做了角度：

el.append('<span>random stuff</span>').append('{{randomFunction()}}');

等到上一个.append（）完成

9 个答案: