Espere hasta que se complete el .append() anterior

¿Cómo podemos hacer esperar hasta que se complete appendlo anterior ? appendEstoy agregando una gran cantidad de datos, por lo que el anexo actual debería verificar si el anexo anterior está completo. Puedo hacer esto dando todos los anexos de forma independiente con cierto retraso. Pero prácticamente según mi código puedo tener 'n' número de anexos, así que quiero hacer esto dinámicamente.

Intenté usar el bucle for o while pero el script se está corrompiendo y el navegador falla porque el siguiente anexo comienza antes de que se complete el 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]);
       });
    }
});

});

Oct 09 '09 02:10 bluwater2001

Una manera torpe...

Una función (la función existente) maneja todos los anexos. El código que siguió a los anexos está incluido en una nueva función "kickOffTheRestOfTheProcess".

Después de todos los anexos iniciales, agrega un anexo final. No se ejecutará hasta que todos los demás.

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

A mí me ha funcionado.

Oct 07 '2011 16:10 Tim Gard

Muy simple :)

Usando la función cuando .

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

Apr 11 '2017 15:04 Karl Zillner

Puedo darte algunos consejos sobre cómo mejorar tu 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);

Lograrás:

• 999 selecciones de jquery menos para '#fourElementsonly'
• menos código para inyectar si pones en la clase "portalUserElements" los estilos:
  border-collapse:collapse; ancho: 800 px; margen: 0px; relleno: 0px; color del borde: negro

Esto significa que también puedes:

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

se convierte (¡sin bucle for!):

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

Y:

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

Podría convertirse:

$('.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 que proporciona.
Es posible que desees compactar todo dentro de una única variable de cadena (incluidas las tablas) y agregarla al final.
Vea los artículos que Russ Cam le sugirió en una de sus respuestas.

Oct 08 '2009 22:10 Alex Bagnolini