Подождите, пока не завершится предыдущий .append().

Ответ 1

В приведенном ниже решении работают все браузеры, особенно 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]);
        }
    });
});

Ответ 2

К сожалению, функция jQuery append() не включает обратный вызов. Невозможно действительно проверить его выполнение, поскольку это, как утверждается, происходит немедленно.

См. здесь, чтобы узнать, как эффективно использовать приложение. Вы можете попытаться получить весь текст в одной переменной и просто добавить один раз.

[обновление]. Поскольку у вас есть все ваши данные в объекте JSON от get go, просто выполните цикл и поместите все в переменную, а затем просто добавьте это, как только вы закончите. [/Обновление]

Ответ 3

Основываясь на ответе Тима Гарда, я нашел это решение очень элегантным...

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

Ответ 4

Я могу дать вам несколько советов о том, как улучшить код.

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

Вы выполните:

• 999 меньше параметров jquery для '#fourElementsonly'
• меньше кода для ввода, если вы добавите в класс "portalUserElements" стили:
   границы коллапса: крах; ширина: 800px; Маржа: 0px; обивка: 0px; границы цвет: черный

Это означает, что вы также можете:

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

становится (нет для цикла!):

   $('.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 предложила вам в одном из его ответов.

Ответ 5

Неуклюжий способ...

Одна функция (существующая функция) обрабатывает все добавления. Код, который следовал за добавлениями, завернут в новую функцию "kickOffTheRestOfTheProcess".

После того, как все ваши первоначальные добавления добавятся, добавьте одно окончательное дополнение. Он не будет выполняться до тех пор, пока все остальные.

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

Это сработало для меня.

Ответ 6

Очень просто:)

Использование функции при.

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

Ответ 7

Вы добавляете к различным элементам или к одному элементу? Если вы добавляете один элемент, может быть проще объединить все ваши данные и добавить в виде одного фрагмента.

Кроме того, где данные? Если данные являются статическими (не ajax), то вы должны иметь возможность вызывать

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

Ответ 8

Возможно, другим способом могло быть просто проверить, будет ли длина innerHTML добавляемого вами контейнера равняться длине последнего фрагмента содержимого внутри вашей функции опроса.

Если не добавить, если так добавить.

Ответ 9

построение ответов парней выше, я сделал это в angular:

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