如何在IE11中等待全部Ajax请求完成后排序生成的jQuery元素

核心思路 #

要实现等待所有Ajax请求完成（无论成败）→ 填充jQuery对象 → 排序的流程，关键是利用jQuery的Deferred和$.when()来管理异步流程——因为IE11不支持原生Promise，但jQuery 1.x/2.x/3.x的Deferred完全兼容IE11。

分步实现代码 #

// 假设你的ID列表
var ids = ["id1", "id2", "id3", "id4"];
// 存储所有Deferred对象，用于统一等待
var deferreds = [];
// 存储要排序的jQuery元素集合
var $elements = $();

// 遍历每个ID处理请求和元素创建
ids.forEach(function(id) {
    // 1. 生成/创建对应的jQuery对象（这里示例创建一个div，你可以根据需求调整）
    var $elem = $('<div class="item" data-id="' + id + '"></div>');
    $elements = $elements.add($elem); // 添加到集合中

    // 2. 发起Ajax请求，包装Deferred确保无论成败都会resolve
    var def = $.Deferred();
    $.ajax({
        url: '/your-api-endpoint/' + id,
        method: 'GET',
        success: function(data) {
            // 填充jQuery对象（示例：把返回的数据放到元素里）
            $elem.text('数据：' + data.content);
            // 可以给元素标记成功状态，方便后续排序或样式处理
            $elem.data('status', 'success');
            $elem.data('sortValue', data.sortOrder); // 假设返回排序字段
            def.resolve();
        },
        error: function(xhr) {
            // 请求失败时的处理，比如显示错误信息
            $elem.text('请求失败：ID=' + id);
            $elem.data('status', 'error');
            $elem.data('sortValue', 9999); // 失败的元素排到最后，示例值
            def.resolve(); // 关键：失败也要resolve，确保$.when能等待所有完成
        }
    });
    deferreds.push(def);
});

// 3. 等待所有请求完成后执行排序
$.when.apply($, deferreds).done(function() {
    // 对jQuery元素集合进行排序
    var $sortedElements = $elements.sort(function(a, b) {
        // 这里根据存储的sortValue排序，你可以换成自己的排序规则
        var valA = $(a).data('sortValue');
        var valB = $(b).data('sortValue');
        return valA - valB; // 升序，降序就反过来 valB - valA
    });

    // 把排序后的元素添加到页面中（示例：添加到#container）
    $('#container').empty().append($sortedElements);
});

关键细节说明 #

• 兼容IE11的核心：
  • 不用原生Promise.all()，改用jQuery的$.when()+Deferred，IE11完全支持。
  • 不用箭头函数，改用普通function，避免IE11语法报错。
• 确保所有请求都被等待：
  每个Ajax请求都用$.Deferred()包装，并且无论成功还是失败都调用def.resolve()——默认$.when()只要有一个请求失败就会触发fail，这样修改后能保证所有请求完成后才进入后续逻辑。
• jQuery对象的管理：
  提前创建好空的jQuery元素并加入集合，在Ajax回调中填充数据，这样排序时所有元素都已存在，不会出现“元素未创建”的问题。
• 排序逻辑灵活调整：
  示例中用data('sortValue')排序，你可以根据需求换成ID本身、返回的其他字段，甚至失败状态优先/靠后等规则。

内容的提问来源于stack exchange，提问作者SiriSch