Question

我有一组嵌套的Ajax调用，它们从服务器检索各种数据，并根据这些数据的结构更改一组页面元素，可能执行更多调用并更改更多元素，所有这些都是为了生成用户的新视图：

$.ajax(
    //...
    function() {
        if(x) {
            $('#element').html('...');
        } else {
               $.ajax(// more similar changes, more ajax)
        }
    }
)

目前，上述代码会导致元素按顺序重新绘制。但是，我希望所有重绘都能同时发生 - 至少从用户的角度来看 - 这样用户只能平滑过渡到新视图，而不能看到单独的渲染。

我怎么能实现这个目标？

Answer 1

如果不依赖于每个请求的特定响应

jQuery有一个.when()和.done()函数，在您的情况下，它将首先执行所有AJAX请求，并且当所有请求都完成后，您可以一次性对所有响应数据执行某些操作因此，当不同的AJAX请求在不同阶段完成时，用户不会看到交错的转换。

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four AJAX requests complete
    // a1, a2, a3 and a4 contain lists of 3 items; the response text [0],
    // the status [1], and an jqXHR object [2] for each of the listed AJAX calls
    $('#element1').html(a1[0]);
    $('#element2').html(a2[0]);
    $('#element3').html(a3[0]);
    $('#element4').html(a4[0]);
});

function ajax1() {
    return $.ajax({
        url: "someUrl.php",
        dataType: "html",
        data:  myData,
        ...
    });
}

function ajax2() {} // same as above
function ajax3() {} // same as above
function ajax4() {} // same as above

有关使用.when()的更多信息，以及了解如何处理AJAX调用的错误，请查看jQuery documentation。

如果您依赖于每个请求的特定响应

您可以将每个响应和元素ID存储到一个数组中，并在所有AJAX调用完成后再一次处理它们。这样的事情可以帮助（使用上面的代码）：

var myAjaxResponses = [];
$.ajax(
    //...
    function() {
        if(x) {
            myAjaxResponses.push({
                'elementID': "element1",
                'responseData': x,
            });
        } else {
            $.ajax(
                function() {
                    if (x) {
                        myAjaxResponses.push({
                            'elementID': "element2",
                            'responseData': x,
                        });
                    }
                }
            )
        }
    }
)

// loop through myAjaxResponses
// adding the response data to each respective element
function processResponses() { // called when last AJAX request finishes
    $.each(myAjaxResponses, function (index, value) {
        $('#'+value.elementID).html(value.responseData);
    });
}

这是一个JSFIDDLE来显示数组的想法。

Answer 2

Chrsva，我可以设想三种选择：

累积客户端的零碎数据，并在完成后对其进行操作。
撰写服务器端的整个数据集，一次性发送，然后对其进行操作。
当它到达时，通过更新相关DOM片段的克隆来对零碎数据进行操作，然后在所有数据交付后对DOM进行存储切换。

您选择的选项部分取决于您已编写的内容。根据你在问题中的说法，最有吸引力的选择是＃3。

您最大的问题可能是确定数据收集何时完成。

一组AJAX请求和执行响应数据的队列集

2 个答案: