JS中同步Ajax阻塞DOM更新的专业解决方案咨询

1. 优先改用异步Ajax（推荐方案） #

同步Ajax是问题的核心根源——它会直接阻塞浏览器的UI渲染线程，导致样式更新、用户交互等操作全部被推迟到线程空闲时执行，不仅样式显示延迟，还会让页面陷入假死状态。改成异步请求后，浏览器能及时处理按钮的样式渲染，同时可以通过Promise链式调用保证两个请求的执行顺序：

$(document).on("click", ".btn-diameter", function(){
   const $btn = $(this);
   $btn.addClass("diameter-selected");

   // 链式调用保证请求按顺序执行
   $.ajax({
     method: "POST",
     url: "/page1.asp"
   }).then(function() {
     return $.ajax({
       method: "POST",
       url: "/page2.asp"
     });
   }).catch(function(error) {
     // 请求失败时可以还原按钮状态，提升体验
     $btn.removeClass("diameter-selected");
     console.error("请求出错:", error);
   });
});

这个方案的优势：

• 浏览器立即渲染按钮的选中样式，无延迟
• 两个请求顺序执行，且不会阻塞页面其他操作
• 支持错误捕获与状态回滚，逻辑更健壮

2. 若必须保留同步Ajax（不推荐） #

如果受限于业务场景必须使用同步请求，可以通过让浏览器先完成一次重绘再执行Ajax来规避样式延迟问题。浏览器的重绘操作在事件循环的渲染阶段执行，我们可以借助requestAnimationFrame或setTimeout把同步请求放到下一次事件循环中：

用requestAnimationFrame（精准匹配渲染时机） #

$(document).on("click", ".btn-diameter", function(){
   const $btn = $(this);
   $btn.addClass("diameter-selected");

   // 等待浏览器完成一次重绘后执行同步请求
   requestAnimationFrame(function() {
     $.ajax({
       method: "POST",
       async: false,
       url: "/page1.asp"
     });

     $.ajax({
       method: "POST",
       async: false,
       url: "/page2.asp"
     });
   });
});

用setTimeout（简单快捷） #

$(document).on("click", ".btn-diameter", function(){
   const $btn = $(this);
   $btn.addClass("diameter-selected");

   // 0毫秒延迟即可让浏览器优先处理渲染
   setTimeout(function() {
     $.ajax({
       method: "POST",
       async: false,
       url: "/page1.asp"
     });

     $.ajax({
       method: "POST",
       async: false,
       url: "/page2.asp"
     });
   }, 0);
});

注意：这两种方法只是临时规避了样式延迟的表象，同步Ajax阻塞UI的本质问题仍然存在，所以仅作为特殊场景下的权宜之计，优先推荐异步方案。

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