等待上一个.append（）完成

我们如何让append等到前一个append完成。我追加了大量的数据，所以现在的追加应该检查前面的追加是否完成。我可以通过给所有附加单独的延迟一段时间来做到这一点。但实际上根据我的代码，我可能会有'n'个附加数，所以我想动态地执行此操作。等待上一个.append（）完成

我尝试使用for或while循环，但脚本被损坏，浏览器崩溃，因为下一个append在前一个append完成之前就开始了。

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

});

来源

2009-10-08 bluwater2001

将追加的数据一次性带入文档中，还是使用Ajax将其逐件拉入？ – 2009-10-08 19:14:51

请显示您当前使用的代码。 – Gumbo 2009-10-08 19:24:08

我正在使用Ajax Post并获取所有数据作为Json对象。 – bluwater2001 2009-10-08 20:01:53

以下解决方案适用于所有浏览器，特别是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]); 
     } 
    }); 
});

来源

2009-10-08 22:05:21 bluwater2001

它看起来像您将单独添加到报表数组中的每个元素。在所有浏览器中，这将是** SLOW **，尤其是IE6。看看这篇文章中发布的文章http://stackoverflow.com/questions/1539841/wait-untill-previous-append-is-complete-jquery/1539888#1539888。您可能还想看看documentFragments - http://ejohn.org/blog/dom-documentfragments/ – 2009-10-08 22:16:09

你追加到不同的元素或单个元素？如果您追加到单个元素，则可能更容易将所有数据连接起来并追加为一个块。

另外，数据来自哪里？如果数据是静态的（非阿贾克斯），那么你应该能够调用

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

来源

2009-10-08 19:16:43 Rowan

我正在使用使用Ajax Post并获取所有数据作为Json对象 – bluwater2001 2009-10-08 20:09:46

即使认为数据是动态的[ajax post和json对象] ..如果返回的数据很小，那么我们可以使用上述方法。如果数据很大，浏览器将崩溃。 – bluwater2001 2009-10-08 21:50:24

您发布的代码有问题吗？因为据我所知，它应该工作，因为你每次将数据附加到不同的元素。 – Rowan 2009-10-08 22:06:56

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

See Here关于如何有效地使用append的一些信息。实际上，你可以尝试将所有文本放入一个变量中，并简单地使用append一次。

[更新]由于您将所有数据放在JSON对象中，只需循环并将其全部放入一个变量中，然后在完成后追加。 [/ update]

来源

2009-10-08 19:19:44 idrumgood

发布的链接被低估 – Matthew 2017-03-06 08:35:28

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

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更少的jQuery选择以 '#fourElementsonly'
更少的代码被注入，如果你把在课堂上“portalUserElements”的样式：
border-collapse：collapse;宽度：800像素;保证金：0像素;填充：0像素;边框颜色：黑色

这意味着你还可以：

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在他的答案中提出的那些文章。

来源

2009-10-08 22:30:23

一种笨拙的方式...

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

完成所有初始附加后，添加一个最终附加。直到所有其他人都不会执行。

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

这对我很有用。

来源

2011-10-07 16:11:04

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

如果不是附加，如果附加。

来源

2011-11-13 09:03:48 rism

基于从animuson答案，我发现这个解决方案是很优雅......

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

来源

2015-04-21 22:52:01

这些是让我每天都在进行的事情。就像在箱子里再找一个甜甜圈一样。 – Sam 2015-07-08 21:46:14

建设的家伙回答上面我的角度这样做：

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

来源

2015-08-14 20:39:05 Helzgate

很简单:)

使用时功能。

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

来源

2017-04-11 15:17:55

等待上一个.append（）完成

回答

相关问题