JQuery продолжить выполнение цикла после успеха AJAX

Question

У меня есть вызов jQuery ajax в цикле.Однако я не хочу, чтобы эти ajax-вызовы выполнялись одновременно, мне нужно завершить первый 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
            }
        });
}

Я хочу, чтобы цикл продолжал выполняться только после манипулирования DOM вУСПЕХ выполнен (потому что вызов ajax зависит от дерева DOM).Теоретически я знаю, что мог бы установить для вызова ajax значение async: false, но это не рекомендуется, поскольку это может привести к зависанию браузера.

Answer 1

Поскольку async: false всегда плохая идея, я бы порекомендовал что-то вроде этого:

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

Установка async в false сделает это.Имейте в виду, что веб-браузер может блокироваться во время выполнения запросов, если вы делаете их асинхронно.

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

Answer 3

вы можете сделать что-то вроде этого (псевдокод):

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