点击按钮后发起AJAX请求前如何立即显示加载屏？

• 浏览器的JS执行和DOM渲染共用主线程，修改加载容器显示属性后，浏览器需要等待当前主线程的同步任务全部执行完成，才会触发重绘更新UI。如果后续存在同步AJAX请求、耗时同步计算、高延迟定时器，都会阻塞/延迟UI更新，导致加载屏晚显。
• 你当前代码中设置了3600ms的定时器延迟，主动推迟了请求执行，同时如果getResults内部使用了async: false的同步AJAX，会进一步阻塞渲染，最终出现4-5秒的加载屏延迟。
• 重复写三次加载容器显示逻辑没有必要，不会加快渲染速度。

1. 第一步先将AJAX改为异步模式，这是最核心的要求：
   检查getResults内的AJAX配置，删掉async: false配置项，jQuery AJAX默认就是异步模式，同步请求会直接阻塞主线程渲染，必须禁用。
2. 调整定时器延迟为0，让浏览器先完成加载屏渲染再执行请求：
   0延迟的定时器会把回调推入宏任务队列，等待当前主线程的DOM渲染流程完成后再执行，完美保证加载屏先显示再发起请求，修改后的代码如下：

// 仅保留一行显示逻辑即可
$('.loading-container').show();
console.log("start");

setTimeout(function () {
    getResults();
    console.log("end");
}, 0);

3. 异步模式下beforeSend配置完全可以正常生效，示例写法如下：

function getResults() {
  $.ajax({
    url: "你的接口地址",
    type: "POST",
    data: {/* 请求参数 */},
    beforeSend: function () {
      $('.loading-container').show();
    },
    success: function (res) {
      // 处理接口返回结果
    },
    complete: function () {
      // 请求结束后统一隐藏加载屏，避免异常情况加载屏常驻
      $('.loading-container').hide();
    }
  })
}

• 检查.loading-container的CSS是否配置了transition、animation入场动画，如果有设置动画延迟属性，直接删除或调整为0即可。
• 不要在点击事件的同步流程中执行大量计算类任务，所有耗时操作都放到定时器回调中，避免阻塞UI渲染。

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