Обработать код очереди Ajax и продолжить

Question

Итак, я использую JQuery AjaxQueue , чтобы сделать что-то, но у меня проблема в том, что я не могу понять, как заставить это продолжаться только после того, как вся очередь сделана. Я хочу, чтобы он просматривал таблицу, проверяя, удаляются ли вещи, а затем завершает ее. То, что происходит сейчас, заключается в том, что содержимое очереди будет обрабатываться одновременно с содержимым вокруг него, поэтому он не будет выполнять вызовы ajax перед продолжением.

    var outputString = "";
    $('#errors').html("");

    $("#deletingitems tbody tr").each(function() {
        if(rowCounter == 1) {
            htmltext.append(TopofHTMLPage());
        }

        var tableValA = $(this).find("td").eq(0).html();
        var tableValB = $(this).find("td").eq(1).html().split("/")[0];

        $.ajaxQueue({
            type: "POST",
            url: "@Url.Content("~/webservices/retrieve.asmx/Get")",
            data: "{'index': '" + tableValA + "', 'identity': '" + tableValB + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                //http://encosia.com/2009/06/29/never-worry-about-asp-net-ajaxs-d-again/
                if (msg.hasOwnProperty("d")) {
                    // Leave the .d behind and pass the rest of
                    //  the JSON object forward.
                    outputString = msg.d;
                    $('#errors').append(outputString);
                    if(obj.valA != null) {
                        htmltext.append('<tr>');
                        htmltext.append('<td>' + obj.valA + '</td>');
                        htmltext.append('<td>' + obj.valB + '</td>');
                        htmltext.append('<td>' + obj.valC + '</td>');
                        htmltext.append('<td>' + obj.valD + '</td>');
                        htmltext.append('<td>' + obj.valE + '</td>');
                        htmltext.append('</tr>');
                    }
                }
            }
            , error: AjaxFailed
        });

        if(rowCounter == 10) {
            htmltext.append(BottomofHTMLPage());
            rowCounter = 1;
        }
        else {
            rowCounter++;
        }
    });
    // Add rows until 10 rows
    while(rowCounter <= 10) {
        htmltext.append('<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
        rowCounter++;
    }

    htmltext.append(BottomofHTMLPage());

    htmltext.append('</body>');
    htmltext.append('</html>');
    var page =  window.open('','NewHTMLPage','width=1500,height=600,scrollbars=yes');
    page.document.open();
    page.document.write(htmltext.toString());
    page.document.close();

Answer 1

Ajax является асинхронным (как и должно быть ajaxQueue, иначе это не будет ajax).Это означает, что когда вы делаете запрос, ваш код продолжается, пока ajax получает запрошенные данные.Ваши обратные вызовы будут выполнены, когда данные будут готовы, и это произойдет после того, как ваш код основной линии будет завершен (см. Является ли JavaScript многопоточным? ).Вот почему строки вашей таблицы появляются после закрывающих тегов html.

Чтобы решить вашу проблему, вам нужно вставить закрывающий код в обратный вызов и определить, когда последний запрос был выполнен.

jQuery(function ($) {
    var i = 0;
    $('tr').each(function () {
        i++;
        $.ajax({
            url: 't.html',
            success: function (data) {
                console.log('serving: ' + i);
                if(--i <= 0) {
                    console.log('which was the last');
                }
            }
        });
    });
});

То же самое относится и к ajaxQueue.

Answer 2

Я не знаком с AjaxQueue, но похоже, что вы можете добиться того, что делаете, просто с помощью ядра jQuery, просто воспользовавшись обратным вызовом:

var gotAttribute = function(attr)
{
    $("#deletingitems tbody tr").each(function() {
        if (this.value == 1) {
            // Do stuff with attr?
        }
    }
};

// jQuery will pass the result onto gotAttribute once available
$.ajax({ success: gotAttribute });