如何手动触发jQuery AJAX请求，实现先发请求再设置加载屏？

首先明确：jQuery的$.ajax()在调用时就会自动发起请求，你调试时看到请求在加载屏设置后才发送，是因为JavaScript的单线程事件循环机制——当前同步代码（设置加载屏）执行完毕后，浏览器才会处理AJAX请求的发送逻辑，所以两种写法的实际效果完全一致。

如果想要完全手动控制请求的发送时机（先发送请求，再执行加载屏设置），可以通过以下两种方式实现：

方式一：使用原生XMLHttpRequest对象 #

原生XHR支持手动调用send()方法触发请求，完全符合你的需求：

$([SOME BUTTON]).click(()=>{
    // 初始化并配置XHR
    const xhr = new XMLHttpRequest();
    xhr.open('GET', [address]); // 根据实际需求替换请求方法（如POST）

    // 绑定成功/失败回调
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 处理成功响应逻辑
        } else {
            // 处理HTTP错误
        }
        // 移除加载屏
    };
    xhr.onerror = function() {
        // 处理网络错误
        // 移除加载屏
    };

    // 先发送请求
    xhr.send();

    // 再设置加载屏
    // Set up a loading screen
});

方式二：利用异步队列延迟加载屏设置 #

如果不想切换到原生XHR，可以将加载屏的设置代码放入异步队列，让AJAX请求优先进入处理流程：

$([SOME BUTTON]).click(()=>{
    let jqxhr = $.ajax([address]);

    // 将加载屏设置放入下一事件循环，让请求先发起
    requestAnimationFrame(() => {
        // Set up a loading screen
    });

    jqxhr.done(()=>{
            // 处理成功逻辑
        })
        .fail(()=> {
            // 处理错误逻辑
        })
        .always(()=>{
            // 移除加载屏
        });
});

需要注意的是，即使使用第二种方式，请求的实际发送时机仍受浏览器事件循环的影响，但能尽可能让请求更早发起。

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