Question

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

上传完成后，脚本将文件名（$ 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);
                    });

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

现在问题在于这个小部分

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

在第一次ajax电话会议中。

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

我已经尝试在完成异步请求的ajax调用之后放置代码。完全不知道如何接近。

jQuery / javscript解决方案将受到赞赏。（没有任何额外的库加载）

Answer 1

您应该尝试将请求设置为异步。否则，您必须在代码中引入一些setTimeout(makeAnotherRequest, 0) hack。

这就是它可以做到的方式＆＃34; ajax方式＆＃34;。

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

Ajax异步调用阻止其他脚本

1 个答案: