jQuery는 Ajax 성공 후 루프 실행을 계속합니다.

Question

루프에서 jQuery ajax 호출이 있습니다. 그러나 나는 그 아약스 호출이 동시에 이루어지기를 원하지 않는다. 나는 다음 아형 호출을 완료하기 전에 첫 번째 아약스 호출이 필요하다.

for (var i = 0; i < options.length; i++) { 
     jQuery.ajax({ 
      url: "ajax_file.php", 
      data: //some data based on DOM tree 
      success: function(data){ 
       //some DOM manipulation 
      } 
     }); 
} 

나는 루프 (AJAX 호출이 DOM 트리에 의존하기 때문에) 성공의 DOM 조작이 실행 된 후에 실행을 계속하고 싶다. 이론적으로 아약스 호출을 async : false로 설정할 수 있지만 브라우저를 고정 할 수 있으므로 권장하지 않습니다.

Answer 1

는,이 같은 것을 권 해드립니다 :

var recur_loop = function(i) { 
    var num = i || 0; // uses i if it's set, otherwise uses 0 

    if(num < options.length) { 
     jQuery.ajax({ 
      url: "ajax_file.php", 
      data: //some data based on DOM tree 
      success: function(data){ 
       recur_loop(num+1); 
      } 
     }); 
    } 
}; 

Answer 2

당신은이 (의사 코드) 같은 작업을 수행 할 수 있습니다

var i =0; 
doLoop(); 

function doLoop() { 
    //exit condition 
    if (i >= options.length) { 
     return; 
    } 
    //loop body- call ajax 
    $.ajax({ 
    //... 
    success: function(data) { 
     //do your thing 
     i++; 
     //go to next iteration of the loop 
     doLoop(); 
    } 
    }); 
} 

Answer 3

그렇게 할 것입니다 false로 async 설정. 비동기 적으로 수행하면 요청이 발생하는 동안 웹 브라우저가 잠길 수 있습니다. async: false 항상 나쁜 생각이기 때문에

jQuery.ajax({ 
    async : false, 
    url: "ajax_file.php", 
    data: //some data based on DOM tree 
    success: function(data){ 
     //some DOM manipulation 
    } 
});