Espere hasta que se haya completado .append()

Question

¿Cómo podemos hacer que append espere hasta que se complete el append anterior? Estoy agregando una gran cantidad de datos para que el presente apéndice verifique si el apéndice anterior está completo. Puedo hacer esto dando todos los append de forma independiente con un poco de retraso. Pero prácticamente de acuerdo con mi código, puedo tener 'n' número de anexos, así que quiero hacer esto de forma dinámica.

Intenté usar for o while loop pero la secuencia de comandos se corrompe y el navegador se cuelga porque la siguiente entrada se inicia antes de que se complete la adición anterior.

---

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

La siguiente solución está funcionando en todos los navegadores, especialmente IE6. El tiempo de respuesta en Firefox es de 10 segundos, pero en IE6 es de 2 minutos y 30 segundos.

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

¿Está añadiendo a diferentes elementos o para un solo elemento? Si agrega a un solo elemento, puede ser más fácil concatenar todos sus datos y anexarlos como un solo fragmento.

Además, ¿de dónde son los datos? Si los datos son estáticas (sin Ajax), entonces debería ser capaz de llamar a

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

Answer 3

Desafortunadamente, la función jQuery append() no incluye una devolución de llamada. No hay forma de verificar realmente si se ha completado, ya que supuestamente ocurre inmediatamente.

See Here para obtener información acerca de cómo usarla de manera eficiente. Lo que más consigue es que puedes intentar que todo tu texto se convierta en una variable y simplemente usar append una vez.

[actualizar] Dado que tiene todos sus datos en un objeto JSON desde el principio, simplemente complete su bucle y póngalo todo en una variable, luego añádalo una vez que haya terminado. [/ update]

Answer 4

Le puedo dar algunos consejos sobre cómo mejorar su código.

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

puede llegar a ser:

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

usted logrará:

• 999 menos selecciones jquery a
• menos código '#fourElementsonly' para ser inyectado si se pone en la clase "portalUserElements" los estilos:
  border-collapse: collapse; ancho: 800px; margen: 0px; relleno: 0px; border-color: negro

Esto significa que también puedes:

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

convierte (sin bucle!):

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

Y:

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

mayo se convierten en:

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

Editar: Se sugieren estos cambios para mejorar el rendimiento de su algoritmo, manteniendo al mismo tiempo la función completa se proporciona.
Es posible que desee compactar todo dentro de una única variable de cadena (incluidas las tablas) y anexarlo al final.
Vea los artículos que Russ Cam le sugirió en una de sus respuestas.

Answer 5

Una manera torpe ...

Una función (la función existente) se encarga de todos los APPENDs. El código que siguió a los anexos está envuelto en una nueva función "kickOffTheRestOfTheProcess".

Después de todas sus APPENDs iniciales, se agrega una última anexión. No se ejecutará hasta que todos los demás.

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

Me ha funcionado.

Answer 6

Quizás otra manera podría haber sido comprobar simplemente si la longitud de la innerHTML del contenedor que está añadiendo a es igual a la longitud del último trozo de contenido, dentro de su función de sondeo.

Si no es así no te anexe, si así se anexe.

Answer 7

Sobre la base de la respuesta de animuson, he encontrado esta solución sea muy elegante ...

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

Answer 8

partiendo de los individuos respuestas anteriores hice esto en angular:

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

Answer 9

muy sencilla :)

Usando la función cuando.

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