다른 스크립트를 차단하는 Ajax 비동기 호출

Question

업로드가 완료된 후 스크립트는 파일 이름 ($ 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++); 
           } 
          }); 
         } 

이제 문제는 Ajax 호출이 작은 부분

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

함께.

이렇게하면 모든 실행이 완료된 후에 변경됩니다. HTML을 변경하려는 다른 시도도 모든 호출이 완료된 후에 반영됩니다.

비동기 요청이 완료된 ajax 호출 후에 이미 코드를 삽입 해 보았습니다. 접근 방법이 완전히 엉망입니다.

jQuery를 /에 javscript 솔루션을 이해할 수있을 것이다. (추가 라이브러리 부하없이)

Answer 1

당신은 정말 요청 비동기를 만들려고합니다. 그렇지 않으면 코드에 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); 
     }); 
    }); 
});