Attendez jusqu'à ce que .append () soit terminé

Comment pouvons-nous faire append attendre jusqu'à ce que le précédent append est terminée. Je suis ajoutant énorme quantité de données de sorte que le présent ajouter devriez vérifier si la précédente append est complète. Je suis en mesure de le faire en donnant tous les ajouter de manière indépendante avec quelques temps de retard. Mais pratiquement, en fonction de mon code j'ai peut-être 'n' le nombre de ajoute donc je veux le faire dynamiquement.

J'ai essayé d'utiliser pour ou while, mais le script est corrompu et le navigateur se bloque en raison de la prochaine append est de commencer avant que la précédente append est complète.

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

source d'informationauteur bluwater2001

  1. 15

    Malheureusement, le jQuery append() n'est pas un rappel. Il n'y a aucun moyen de vraiment vérifier pour la réalisation de cela, comme il est censé se produit immédiatement.

    Voir Ici pour avoir des infos sur comment ajouter utiliser efficacement. Ce qu'il obtient à l'est, vous pouvez essayer d'obtenir la totalité de votre texte dans une variable et utiliser simplement ajouter une fois.

    [mise à jour] Puisque vous avez toutes vos données dans un objet JSON de l'aller, il suffit de faire votre boucle à travers et tout mettre dans une variable, puis juste ajouter qu'une fois que vous avez terminé. [/mise à jour]

  2. 4

    Je peux vous donner quelques conseils sur la façon d'améliorer votre code.

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

    Peut devenir:

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

    Vous permettra d'accomplir:

    • 999 moins de jquery sélections pour '#fourElementsonly'
    • moins de code à injecter si vous mettez dans la catégorie "portalUserElements" les styles:

      border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black

    Cela signifie que vous pouvez également: 

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

    devient (pas de boucle!):

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

    Et:

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

    Peut devenir:

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

    Modifier: ces modifications sont proposées pour améliorer votre algorithme de performance, tout en conservant la totalité des fonctionnalités qu'il offre.

    Vous souhaitez compacter le tout à l'intérieur d'une seule variable de chaîne (y compris les tables) et l'ajouter à la fin.

    Voir les articles que Russ Cam a suggéré de vous dans l'une de ses réponses.

  3. 4

    Un maladroit façon...

    Une fonction (la fonction) s'occupe de toutes les ajoute. Le code qui ont suivi l'ajoute est enveloppé dans une nouvelle fonction "kickOffTheRestOfTheProcess".

    Après tous vos initiales ajoute, vous ajoutez une dernière append. Il ne sera pas exécutée jusqu'à ce que tous les autres.

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

    Il a travaillé pour moi.

  4. 2

    Basé sur la réponse de animuson, j'ai trouvé cette solution pour être très élégant...

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

    Très simple 🙂

    À l'aide de quand fonction.

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

    Êtes-vous l'ajout de différents éléments ou à un seul élément? Si vous êtes à l'ajout d'un seul élément, il peut être plus facile pour concaténer l'ensemble de vos données et de les ajouter comme un gros morceau.

    Aussi, où sont les données? Si les données sont statiques (non ajax), alors vous devriez être en mesure d'appeler

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

    Peut-être une autre façon peut-être été de simplement de vérifier si la longueur de la innerHTML du conteneur, vous êtes ajoutant à est égale à la longueur du dernier bloc de contenu, à l'intérieur de votre bureau de vote de la fonction.

    Si pas ne pas ajouter, si donc l'ajouter.

  8. 0

    Ci-dessous la solution fonctionne sur tous les navigateurs, en particulier IE6. Le temps de réponse de Firefox est de 10 sec, mais dans IE6, il est à 2 min 30 sec.

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

    bâtiment sur les mecs les réponses ci-dessus je l'ai fait dans angulaire:

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