jquery - 同步jquery $.ajax而不锁定IE？

Question

花了一些时间尝试实现这一点，并找到了一个我认为在 Firefox 中效果很好的解决方案，但是在 IE 中测试时发现使用 async: false 会导致浏览器被锁定(停止响应并出现卡住) ) 在通话期间。

需求基本如下。我提供了一系列用户可以检查的复选框。在特定时间，我调用我的函数“selectedSeriesData()”，该函数用于依次向我的服务发送请求以获取请求的数据。我特别选择使用同步，以便在方法执行时向浏览器输出状态消息和警告。

例如。 “加载数据1/3”，然后“加载数据2/3”，“加载数据3/3”

当然，我现在知道这会锁定某些浏览器，因此 IE 中的体验不仅会锁定浏览器，而且我尝试显示的任何消息都不会显示。在每次 ajax 调用之后我可以调用任何类型的简单 doEvents 之类的操作，或者这只是重组我的 ajax 调用的问题。如果是这样的话，有什么实现建议可以满足我的要求吗？

下面是代码的简化摘录，供引用。

function selectedSeriesData() {

    var seriesData = [];
    var index = 0;

    $.each($("input[name='idCheckBox']:checked"), function () {

        var id = $(this).val();

        $("#loadingMessage").text("Loading " + id + "...");

            $.ajax({
                type: 'POST',
                async: false,
                url: '<%: loadSeriesDataPath %>',
                dataType: 'json',
                data: {
                    Id: id
                },
                success: function (data) {
                    seriesData[index] = data;
                    index++;
                },
                error: function (xhr, ajaxOptions, error) {
                    $("#warnings ul").append('<li>A communication error occured while attempting to load data for the series.</li>');

                }
            });
        }
    });
    return seriesData;
}

Answer 1

您可以使用jQuery Deferred objects继续使用异步请求，然后在所有结果完成后“加入”结果。

function selectedSeriesData(cb) {
    var reqs = [];
    $("#loadingMessage").text("Loading...");
    $("input[name='idCheckBox']:checked").each(function () {
        var id = $(this).val();

        var req = $.ajax({
            type: 'POST',
            url: '<%: loadSeriesDataPath %>',
            dataType: 'json',
            data: {
                Id: id
            },
            error: function(xhr, ajaxOptions, error) {
                $("#warnings ul").append('<li>A communication error occured while attempting to load data for the series.</li>');

            }
        });
        reqs.push(req);
    });
    $.when(reqs).done(function() {
        cb($.makeArray(arguments));
    });
}

现在，您只需将回调传递给您的函数，一旦所有 AJAX 请求成功完成，该函数就会收到一个包含所有 AJAX 请求结果的数组。

注意:$.when 上的文档并不清楚它是否接受包含延迟的单个数组。如果它不起作用，请尝试 $.when.apply($, reqs) 而不是 $.when(reqs)