Можно ли в jQuery иметь полуасинхронный вызов ajax?

Question

Я работаю над сайтом, который включает в себя циклическое перемещение по массиву, используя ajax-вызов jQuery для каждого элемента. Вот упрощенная версия:

var myArray=new Array("El1","El2","El3","El4");
for(var i=0; i<myArray.length; i++){
     $.ajax({
         url: 'page.php?param='+myArray[i],
         success: function(data){
               //doing stuff with the data
               //this needs to complete before the loop advances
         }
     });
 }

Мне нужно завершить каждый вызов, прежде чем переходить через цикл. Я попытался установить async:false, который заставляет цикл работать правильно, но он поддерживает остальные сценарии страницы и вызывает много задержек. Есть ли способ предотвратить продвижение цикла до завершения вызова, но при этом иметь возможность асинхронно запускать другие сценарии?

Answer 1

var idx = 0;
var urls = ["El1","El2","El3","El4"];

var doNextRequest = function() {
    $.ajax({
        url: 'page.php?param=' + urls[idx],
        success: function(data) {
            // ...
            idx++;
            if (idx < urls.length) {
                doNextRequest();
            }
        }
    });
}

doNextRequest();

Answer 2

Нет необходимости в цикле, если вы используете Array.shift:

var myArray = new Array("El1", "El2", "El3", "El4");

function doRequest() {
    if (!myArray.length) return;
    var current = myArray.shift();
    $.ajax({
        url: 'page.php?param=' + current,
        success: function(data) {
            //doing stuff with the data
            doRequest();
        }
    });
}

Answer 3

Вызвать следующий запрос в успешном обработчике предыдущего. Что-то вроде этого. (Может быть более элегантная конструкция для этого).

var myArray=new Array("El1","El2","El3","El4");
var i = 0;

function callAjax()
{
    $.ajax({
        url: 'page.php?param='+myArray[i],
        success: function(data){
            //doing stuff with the data
            //this needs to complete before the loop advances       

            if (i < myArray.length)
            {
                i++;
                callAjax();
            }
        }
    });
}