Ajax-функция JQuery в цикле for ведет себя странно

Question

«get_ing_id» получает строку, просматривает базу данных и извлекает соответствующие данные идентификатора в соответствии со строкой. В этом примере ему нужно извлечь «65» и «66», что он успешно выполняет при выполнении кода.

var ings = [];
var ingsSearch = [];
var i = 2;
var k = 0;
ings[0] = 'apple';
ings[1] = 'banana';

    function next(){
        for(j=0;j<i;j++){
            if(ings[j] != 0){           
                $.ajax({
                    url: burl+'index.php/ajax/get_ing_id',
                    type: 'POST',   
                    data: 'name='+ings[j],
                    success: function(data){    
                        ingsSearch[k] = data;
                        alert(ingsSearch[k]);
                        k++;
                        alert(k);
                    }
                });                     
            }

        }   
    alert(ingsSearch[0]);
    alert(ingsSearch[1]);

    }

Когда код выполняется, я получаю окна с предупреждением в следующем порядке:

• 66
• 1
• 65
• 2
• не определено
• не определено

Это должно быть так

• 66
• 1
• 65
• 2
• 66
• 65

Так где я не так делаю? Я не очень разбираюсь в javascript, буду благодарен, если мне помогут. Спасибо за ваше время!

Answer 1

Попробуйте установить для свойства async объекта ajax значение false. По умолчанию true, поэтому нет гарантии, что вызовы будут завершаться последовательно:

$.ajax({
    async: false,
    // ..
});

• ajax () ^jQuery <- см. <code>async свойство

Обратите внимание на комментарий ShankarSangoli; идеальный способ кодирования это не на основе цикла, а для перехода к следующему элементу из функции обратного вызова AJAX.

Answer 2

Вы должны понимать, что AJAX по умолчанию является асинхронным - функция успеха вызывается сразу после ответа сервера, что, скорее всего, происходит после вызова двух операторов alert; так что lngsSearch[0] lngsSearch[1] фактически не было установлено, когда вы пытаетесь их вывести.