13

我们如何才能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]);
       });
    }
});

});
4

9 回答 9

15

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

有关如何有效使用附加的一些信息，请参阅此处。它几乎得到的是，您可以尝试将所有文​​本放入一个变量中，然后简单地使用 append 一次。

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

于 2009-10-08T19:19:44.577 回答
9

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

$(".selector").append(content).append(function() { /*code goes here to run*/ });
于 2015-04-21T22:52:01.653 回答
7

非常简单 ：）

使用when函数。

$('<div id="appendedItem">Here</div>').appendTo("body");
$.when( $("#appendedItem").length > 0).then(function(){
    console.log( $("#appendedItem").length );
});
于 2017-04-11T15:17:55.870 回答
6

笨拙的方式...

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

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

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

它对我有用。

于 2011-10-07T16:11:04.867 回答
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”类中，则要注入的代码更少：
    border-collapse:collapse; 宽度：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 在他的一个答案中建议您的文章。

于 2009-10-08T22:30:23.417 回答
1

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

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

$('selector').append(data1).append(data2).append(data3);
于 2009-10-08T19:16:43.460 回答
0

以下解决方案适用于所有浏览器，尤其是 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-08T22:05:21.740 回答
0

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

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

于 2011-11-13T09:03:48.370 回答
0

在上面的人的答案的基础上，我以角度做到了这一点：

el.append('<span>random stuff</span>').append('{{randomFunction()}}');
于 2015-08-14T20:39:05.863 回答