Ajax异步调用阻止其他脚本

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

After upload is finished the script passes the file name($filename) to parsing script. The parsing script returns json object containing all ITEMS in file.

上传完成后,脚本将文件名($ filename)传递给解析脚本。解析脚本返回包含文件中所有ITEMS的json对象。

                    $.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);
                    });

I'm running another script for individual ITEM.

我正在为个别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++);
                                }
                            });
                        }

Now the problem is with this small part

现在问题在于这个小部分

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

in first ajax call.

在第一个ajax调用。

This makes the changes after all the execution is done. Not to mention that other attempts to change HTML are also reflected after all the calls are complete.

这将在完成所有执行后进行更改。更不用说在完成所有调用之后,还会反映其他更改HTML的尝试。

I've already tried placing the code after the ajax call where async request is complete. Completely stumped on how to approach.

我已经尝试在异步请求完成的ajax调用之后放置代码。完全难以接近。

jQuery/javscript solution will be appreciated.(Without any additional library load)

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

1 个解决方案

#1

You should really try to make requests async. Otherwise you'll have to introduce some sort setTimeout(makeAnotherRequest, 0) hack into your code.

您应该尝试使请求异步。否则你将不得不在你的代码中引入一些排序setTimeout(makeAnotherRequest,0)hack。

This is how it can be done "ajax way".

这是如何做到“ajax方式”。

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);
      });
  });  
});

#1