Đợi cho đến khi trước .append() hoàn thành

Question

Làm cách nào để chúng tôi có thể thực hiện append đợi cho đến khi append trước đó hoàn tất. Tôi đang phụ thêm một lượng lớn dữ liệu để phần bổ sung hiện tại nên kiểm tra xem phần bổ sung trước đó đã hoàn thành chưa. Tôi có thể làm điều này bằng cách đưa tất cả phụ lục độc lập với một số thời gian trễ. Nhưng thực tế theo mã của tôi tôi có thể có 'n' số phụ thêm vì vậy tôi muốn làm điều này tự động.

Tôi đã thử sử dụng hoặc trong khi vòng lặp nhưng tập lệnh bị hỏng và trình duyệt bị lỗi do phần nối tiếp theo bắt đầu trước khi phần bổ sung trước đó hoàn tất.

---

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

Giải pháp dưới đây hoạt động trên tất cả các trình duyệt đặc biệt là IE6. Thời gian phản hồi trong Firefox là 10 giây, nhưng trong IE6 nó là 2 phút 30 giây.

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

Bạn có phụ thêm vào các yếu tố khác nhau hoặc vào một yếu tố duy nhất? Nếu bạn đang phụ thêm vào một phần tử duy nhất, có thể dễ dàng ghép nối tất cả dữ liệu của bạn và nối thêm thành một đoạn.

Ngoài ra, dữ liệu từ đâu? Nếu dữ liệu là tĩnh (không ajax) sau đó bạn sẽ có thể gọi

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

Answer 3

Thật không may, hàm jQuery append() không bao gồm một callback. Không có cách nào để thực sự kiểm tra hoàn thành nó, vì nó được cho là xảy ra ngay lập tức.

See Here để biết một số thông tin về cách sử dụng nối thêm hiệu quả. Những gì nó khá nhiều được ở là bạn có thể cố gắng để có được tất cả các văn bản của bạn thành một biến và chỉ cần sử dụng chắp thêm một lần.

[update] Vì bạn có tất cả dữ liệu của bạn trong một đối tượng JSON từ khi bắt đầu, chỉ cần lặp lại và đặt tất cả trong một biến, sau đó chỉ cần nối thêm khi bạn đã hoàn tất. [/ update]

Answer 4

Tôi có thể cung cấp cho bạn một số gợi ý về cách cải thiện mã của bạn.

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

có thể trở thành:

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

Bạn sẽ đạt được:

• 999 ít lựa chọn jquery mã
• ít '#fourElementsonly' để được tiêm nếu bạn đặt trong lớp "portalUserElements" các kiểu:
  thu gọn biên giới: thu gọn; chiều rộng: 800px; lề: 0px; padding: 0px; border-color: đen

Điều này có nghĩa bạn cũng có thể:

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

trở nên (không vòng lặp for!):

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

Và:

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

tháng trở thành:

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

Sửa: những thay đổi được đề nghị để cải thiện hiệu suất thuật toán của bạn, trong khi duy trì đầy đủ các tính năng nó cung cấp.
Bạn có thể muốn thu gọn mọi thứ bên trong một biến chuỗi đơn (bao gồm cả bảng) và nối nó vào cuối.
Xem các bài viết mà Russ Cam đã đề xuất bạn trong một trong những câu trả lời của anh ấy.

Answer 5

Một cách vô cùng ...

Một chức năng (chức năng hiện có) xử lý tất cả các phụ kiện. Mã đã theo sau các phụ thêm được bọc trong một hàm mới "kickOffTheRestOfTheProcess".

Sau tất cả các phụ lục ban đầu của bạn, bạn thêm có một phụ lục cuối cùng. Nó sẽ không được thực hiện cho đến khi tất cả những người khác.

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

Nó làm việc cho tôi.

Answer 6

Có lẽ một cách khác có thể là chỉ cần kiểm tra xem chiều dài của innerHTML của vùng chứa mà bạn đang thêm bằng với độ dài của đoạn nội dung cuối cùng, trong hàm bỏ phiếu của bạn.

Nếu không thêm, nếu có thì hãy thêm.

Answer 7

Dựa trên câu trả lời từ animuson, tôi thấy giải pháp này là rất thanh lịch ...

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

Answer 8

xây dựng trên những kẻ câu trả lời ở trên tôi đã làm điều này trong góc:

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

Answer 9

Rất đơn giản :)

Sử dụng khi chức năng.

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