如何使用$.when实现两个AJAX请求并行执行（适配DataTables场景）

你可以直接把两个AJAX请求的Deferred实例作为参数传入$.when实现并发发起，各自的成功回调会在请求完成后独立触发，不会互相等待，正好匹配你说的「DataTable关联请求更快先执行初始化，Excel导出请求慢后执行回调」的需求。如果不需要两个请求都完成后执行统一逻辑，也可以仅保留并发请求的写法，$.when的回调可以留空或者根据你的需求补充。

$(document).ready(function() {
    $(document).on('click', '#Button',function (e) {
        e.preventDefault();
        var isExcel = document.getElementById('Excel').checked ? 1 : 0;

        // 第一个请求：获取页面内容并初始化DataTable
        var request1 = $.ajax({
            url: "page1",
            cache: false,
            data : $('#form').serialize(),
            method: "post",
            success: function(response){
                $('.mytable').show();
                $('.mytable').html(response);
            }
        }).done(function(data) {
            $("#datatables").DataTable({
                "bFilter": true,
                "serverSide": true,
                "deferRender":true,
                "processing": true,
                "ajax": {
                    "url" : "/data.cfm",
                    "type" : 'post'
                }
            });
        });

        // 第二个请求：Excel导出，不需要时赋值已完成的空Deferred
        var request2 = isExcel ? $.ajax({
            url: "/excel.cfm",
            cache: false,
            data : $('#form').serialize(),
            method: "post",
            success: function(response){
                alert('done');
            }
        }) : $.Deferred().resolve();

        // 用$.when监听两个请求的状态，需要统一回调可以补充到done里
        $.when(request1, request2).done(function(res1, res2) {
            // 这里可以加两个请求都完成后需要执行的逻辑，不需要就留空
        });
    });
});

• 我们先声明了request1和request2两个变量存储AJAX请求返回的Deferred对象，两个请求会在定义后立刻并发发起，不会等待另一个请求初始化
• 当isExcel为0不需要导出时，我们给request2赋值一个已经完成的空Deferred对象，避免$.when接收空参数报错
• 原有的第一个请求的页面渲染、DataTable初始化逻辑，和第二个请求的导出成功提示逻辑都保留，会在对应请求完成后立刻触发，无需等待另一个请求结束
• 如果有需要在两个请求都完成后执行的逻辑，可以补充到$.when的done回调中

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