Ajax异步调用阻塞其他脚本

    var jsonData=false; 
        var maxRecords=0; 
        var successRecords=0; 
        var failedRecords=0;

上传完成后，脚本将文件名（$ filename）传递给解析脚本。解析脚本返回包含文件中所有ITEMS的json对象。Ajax异步调用阻塞其他脚本

    $.ajax({ 
         url:'ajax/process-file.php', 
         type: "GET", 
         dataType:"json", 
         async:false, 
         data:{filename:'<?php echo $newFile ?>'} 
        }).success(function(data){ 
         jsonData=data; 
         maxRecords=jsonData.length; 
         $("#record-found").html(maxRecords); 
        });

我为个别ITEM运行另一个脚本。

     for(i=0;i<maxRecords;i++){ 
          //AJAX CALL FOR INDIVIDUAL RECORD 
          $.ajax({ 
           url:'ajax/save-single-planitem.php', 
           type: "POST", 
           async:false, 
           data:{item:jsonData[i]} 
          }).success(function(data){ 
           console.log(data); 
           //IF RECORD WAS SUCCESFULLY ADDED OR UPDATED 
           if(data['result']=="SUCCESS"){ 
            $("#records-success").html(successRecords++); 
           } 
           //IF RECORD WAS NOT ADDED 
           if(data['result']=="FAILED"){ 
            $("#records-failed").html(failedRecords++); 
           } 
          }); 
         }

现在的问题是，在第一个Ajax调用这一小部分

     maxRecords=jsonData.length; 
         $("#record-found").html(maxRecords);

。

这会在所有执行完成后进行更改。更不用说其他尝试更改HTML也会在所有调用完成后反映出来。

我已经尝试将ajax调用放在异步请求完成后的代码。完全难倒如何接近。

的jQuery/javscript解决方案将不胜感激。（没有任何额外的库加载）

来源

2014-10-04 Rohan210

你真的在运行同步（阻塞）Ajax调用吗？为什么？ – jfriend00 2014-10-04 08:27:29

第一个我必须。获取记录以供进一步处理。第二个要获得成功和失败的正确值。因为那样我就不得不让用户选择如何处理失败的尝试。 – Rohan210 2014-10-04 08:38:17

@ Rohan210在这种情况下，不需要同步请求。 – 2014-10-04 08:46:54

你真的应该尽量使异步请求。否则，你将不得不在你的代码中引入一些setTimeout(makeAnotherRequest, 0)黑客。

这是如何做到“阿贾克斯方式”。

function getAll(fileName) { 
    return $.get('ajax/process-file.php', {filename: fileName});  
} 

function getItem(item) { 
    return $.post('ajax/save-single-planitem.php', item); 
} 

var succeeded = 0, failed = 0; 

getAll('<?php echo $newFile ?>') 
.done(function(items) { 
     $("#record-found").html(items.length); 
}) 
.done(function(items) { 
    items.forEach(function(item) { 
     getItem(item).done(function(result) { 
      if(result.result === 'SUCCESS') $("#records-success").html(succeeded++); 
      if(result.result === 'FAILED') $("#records-failed").html(failed); 
     }); 
    }); 
});

来源

2014-10-04 08:45:44

我试过添加setTimeout（function（）{}，6000）;在更新HTML之前的第一次ajax调用之后。没有工作。将尝试这个并再次回来。 – Rohan210 2014-10-04 08:48:37

@ Rohan210 UI线程上的BTW阻塞请求实际上已被弃用。 – 2014-10-04 08:50:02

我试过使用你建议的方法。 forEach（??）给出错误。 Uncaught TypeError：undefined不是一个函数..也有一个原因，你为什么在getAll（'<？php echo $ newFile？>'）上使用多个done（） – Rohan210 2014-10-06 13:22:07

Ajax异步调用阻塞其他脚本

回答

相关问题