调用函数时内部$.ajax()未即时执行问题求助

问题本质 #

你遇到的是AJAX异步执行的正常特性。jQuery的$.ajax()默认开启异步模式（async: true），当函数执行到$.ajax()时，浏览器会发起HTTP请求，但不会停在这里等待请求完成，而是立刻继续执行函数后续代码以及文件中其他代码。只有当主线程完全空闲后，AJAX请求的响应返回时，才会触发success或error回调函数。所以你会觉得AJAX部分要等整个文件代码跑完才“运行”，本质是回调函数的执行时机问题。

解决方案 #

方案1：强制同步执行（不推荐） #

如果必须让AJAX请求完成后再执行后续代码，可以在$.ajax()配置中添加async: false。但要注意，同步AJAX会阻塞浏览器主线程，导致页面卡住、无法响应用户操作，仅适合极端场景：

function submitDetails(){
       var sendObject = new Object();
       sendObject.idCustomer = <?php echo $user_customer_id ?>;
       sendObject.name = customerName.value;

       var convertedObject = JSON.stringify(sendObject);
       
       $.ajax({
           type: "POST",
           url: BASE_URL+"action/method1",
           async: false, // 添加同步配置
           data : {
               parameter : convertedObject
           },
           success : function(responseData) {
               var response = JSON.parse(responseData);
               if(response.status=="SUCCESS"){
                   console.log(true);
               } else{
                   console.log(false);
               }
           },
           error : function() {
               console.log("error");
           }
       });
   }

方案2：标准异步处理（推荐） #

遵循异步编程的规范，把依赖AJAX响应的逻辑全部放到回调函数内，或者用async/await让代码逻辑更直观：

写法一：利用现有回调优化

确保所有需要在AJAX请求完成后执行的逻辑都放在success或error回调里：

function submitDetails(){
       var sendObject = new Object();
       sendObject.idCustomer = <?php echo $user_customer_id ?>;
       sendObject.name = customerName.value;

       var convertedObject = JSON.stringify(sendObject);
       
       $.ajax({
           type: "POST",
           url: BASE_URL+"action/method1",
           data : {
               parameter : convertedObject
           },
           success : function(responseData) {
               var response = JSON.parse(responseData);
               if(response.status=="SUCCESS"){
                   console.log(true);
                   // 在这里写请求成功后的业务逻辑，比如更新页面内容、提示用户等
               } else{
                   console.log(false);
               }
           },
           error : function() {
               console.log("error");
               // 处理请求失败的情况，比如显示错误提示
           }
       });
       // 这里的代码会在AJAX请求发起后立即执行，不会等待响应返回
   }

写法二：使用async/await简化逻辑

把$.ajax()包装成Promise，用async/await让异步代码看起来像同步代码：

async function submitDetails(){
       var sendObject = new Object();
       sendObject.idCustomer = <?php echo $user_customer_id ?>;
       sendObject.name = customerName.value;

       var convertedObject = JSON.stringify(sendObject);
       
       try {
           // 等待AJAX请求完成
           const responseData = await $.ajax({
               type: "POST",
               url: BASE_URL+"action/method1",
               data : {
                   parameter : convertedObject
               }
           });
           var response = JSON.parse(responseData);
           if(response.status=="SUCCESS"){
               console.log(true);
           } else{
               console.log(false);
           }
       } catch (error) {
           console.log("error");
       }
       // 这里的代码会在AJAX请求完成后才执行
   }

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