等到之前的 .append() 完成

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 获取有关如何有效使用附加的一些信息。它的主要作用是您可以尝试将所有文​​本放入一个变量中，然后只需使用一次 append。

[更新] 由于您从一开始就将所有数据都保存在 JSON 对象中，因此只需进行循环并将其全部放入变量中，然后在完成后将其追加。 [/更新]

Answer 2

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

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

Answer 3

非常简单:)

使用 when 函数。

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

Answer 4

笨拙的方式...

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

在所有初始附加之后，您添加了一个最终附加。直到所有其他人都不会执行它。

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

它对我有用。

Answer 5

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

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

你将完成：

• '#fourElementsonly' 减少了 999 个 jquery 选择
• 如果您将样式放入“portalUserElements”类中，则注入的代码更少：
  边框折叠：折叠；宽度：800 像素；边距：0px；填充：0px；边框颜色：黑色

这意味着您还可以：

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

变成（没有 for 循环！）：

   $('.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 6

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

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

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

Answer 7

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

如果不是不追加，如果是追加。

Answer 8

以下解决方案适用于所有浏览器，尤其是 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 9

在上面这些人的回答的基础上，我用角度做了这个：

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