Дождитесь завершения предыдущего .append ()

Question

Как мы можем заставить append дождаться завершения предыдущего append. Я добавляю огромное количество данных, поэтому настоящее приложение должно проверить, завершено ли предыдущее приложение. Я могу сделать это, отдавая все приложения самостоятельно с некоторой задержкой. Но практически в соответствии с моим кодом у меня может быть n добавлений, поэтому я хочу сделать это динамически.

Я пытался использовать цикл for или while, но скрипт повреждается, и браузер падает, потому что следующее приложение запускается до завершения предыдущего.

---

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

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

См. Здесь для получения некоторой информации о том, как эффективно использовать append. То, к чему это в значительной степени приводит, - вы можете попытаться собрать весь ваш текст в одну переменную и просто использовать один раз добавление.

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

Answer 2

Исходя из ответа от animuson, я нашел это решение очень элегантным ...

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

Answer 3

Неуклюжий путь ...

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

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

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

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

Answer 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]);
     }
);

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

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

Основываясь на ответах парней выше, я сделал это в угловых:

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

Answer 8

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

Если нет, не добавляйте, если добавляйте.

Answer 9

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