关于JS中同步ajax调用的问题

Question

使用下面的代码，我期望将“直径选择”类添加到按钮，然后运行同步ajax调用。但是，似乎 ajax 调用在“.addClass”命令之前运行，并且由于它正在等待我猜的承诺，因此我在 ajax 请求完成后看到了按钮效果。当我将 setTimeout 添加到 ajax 调用 1 纳秒时，我在 ajax 调用完成之前看到了按钮效果。所以，我以一种奇怪的方式解决了我的问题，但我想了解是否有更专业的方法来实现这一目标。

    $(document).on("click", ".btn-diameter", function(){

       $(this).addClass("diameter-selected");

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

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

    });     

Answer 1

这是因为您使用

async: false

的请求会阻塞主浏览器的线程。这就是为什么在满足您的同步请求之前它不会使用新的 css 类重新渲染元素。

所以，只需将您的代码替换为：

    $(document).on("click", ".btn-diameter", function(){

       $(this).addClass("diameter-selected");

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

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

    });