Почему код $.ajax выполняется несколько раз?

Question

[wkololo_4ever]

Есть такая функция

function GetNewTelephone() {
            var link = 'Home/NewTelephone?idOldTelephone=-1&idContact=-2';
            var number = document.getElementsByClassName("number");
            for (i = 0; i < number.length; i++) {//цикл по всем полям с номерами
                var numberInp = number[i];
                var idNumber = number[i].id;
                var idContact = number[i].parentNode.id;
                link = link.replace("-1", idNumber);
                link = link.replace("-2", idContact);
                $.ajax({
                    type: "GET",
                    url: link,
                    success: function (data) {
                        for (j = 0; j < data.length; j++)//цикл по всем новым номерам
                        {
                            var telephone = data[j];
                            var cont = document.getElementById(telephone.ContactId);
                            var numberInput = cont.cells[2];
                            numberInput.innerText += telephone.Number;
                            numberInput.id = telephone.TelephoneId;
                            
                        }
                    },
            })      
        }
    }

Не понимаю, почему при data.length=1 во втором цикле

for (j = 0; j < data.length; j++){
  ...
}

количество повторов кода внутри цикла равно number.length из первого цикла

for (i = 0; i < number.length; i++){
...
  $.ajax({
...
    for (j = 0; j < data.length; j++){
  ...
}})
}

Answer 1

[Сергей Протько]

А чего вы хотите, у вас же функция $.ajax выполняется внутри цикла. Судя по коду она должна быть вне его.

Если же вам нужно вызывать success когда отработает все и что-то делать с результатом всех запросов, то можно сделать так:

var promises = [],
      linkTpl = 'Home/NewTelephone?idOldTelephone=%1&idContact=%2';
      $('.number').each(function () {
             // советую хранить информацию не в id-шниках а в data-* атрибутах
             // их для этого и придумали
             var idNumber = this.id;
             var idContact = this.parentNode.id;
             // вот тут у вас был баг, у вас один раз формировалась
             // правильная ссылка и она больше не менялась.
             var link = linkTpl.replace("%1", idNumber).replace("%2", idContact);
             // добавляем в очередь обещание
             promises.push($.ajax({
                    type: "GET",
                    url: link
             }));
      });
      
      $.when(promises).then(function () {
           // выполнится когда все запросы, добавленные в очередь, выполнятся
           // результаты запроса будут переданы как аргументы, смотрите документацию
      });

https://api.jquery.com/jQuery.when/

Comments

[wkololo_4ever]

@Fesor а как мне узнать правильный link? Он меняется в зависимости от выбранного поля в таблице. Я получаю id строчки и id поля в строчке и использую эти значения для маршрутизации.

[wkololo_4ever]

@Fesor сигнатура метода действия у меня имеет вид public JsonResult NewTelephone(int idOldTelephone, int idContact)

[Сергей Протько]

@wkololo_4ever, ну тогда опять же, в чем проблема? У вас в любом случае получается что на каждую запись нужно сделать ajax запрос, что значит что все происходит именно так как надо.

В случае если у вас в data Только один элемент, код выполнится один раз на каждую итерацию внешнего цикла, то есть number.length раз. Соответственно и ajax запросы будут вызываться столько же раз, и success в них так же будет вызываться для каждого сделанного запроса.

Или вам нужно объединить результаты всех запросов? Вы объясните толком тогда что не так.

[wkololo_4ever]

@Fesor так, правильно ли я понимаю, что у меня сейчас создается number.length ajax запросов, то есть все запросы с разными значениями link. Выходит, каждый запрос вызывается один раз. Именно так мне и нужно, но в моем случае код внутри каждого ajax выполняется number.length раз.

[Сергей Протько]

@wkololo_4ever, естественно. success Будет вызываться при каждом успешном ajax запросе. То есть number.length раз. Если вам нужно произвести какие-то действия когда все запросы отработают, то можно использовать обещания ($.ajax возвращает обещание о том, что функция выполнит что-то, обещания можно объединять в массивы и ждать когда все выполнится).

Сейчас обновлю свой ответ.

[wkololo_4ever]

@Fesor все равно не совсем понял, почему код внутри каждого AJAX выполняется number.length раз, а не один. Вообще, весь смысл в том, что у меня есть таблица с контактами. В этой таблице есть поле номеров телефонов, которая по сути отдельная таблица. Контакты и номера телефонов должны обновляться новыми строками, если они появились в базе. Обновление самих контактов не вызвало проблема, а код в вопросе - это попытка реализовать обновление поля телефонов в строке контактов. Может быть вы посоветуете мне, как лучше реализовать то, что я описал?

[Сергей Протько]

предположим что number.length равно 4-ем. Тогда, во время прохождения по циклу, мы вызываем 4 запроса. То что вы задаете в success, это функция, которая будет вызвана, когда успешно выполнится запрос. То есть на КАЖДЫЙ запрос будет вызываться эта функция. Итого у нас 4 запроса, 4 раза вызывается функция.

Вот и все.

[wkololo_4ever]

@Fesor именно такого поведения я и ожидал, но точки останова расставленые в Chrome показывают, что код внутри запроса выполняется number.length раз.

[Сергей Протько]

@wkololo_4ever, вам стоит отдохнуть и отвлечься. Мне просто лень писать одно и то же, получается какая-то рекурсия. Я даже не понимаю что именно вводит вас в заблуждение.

- вы вызываете вашу функцию GetNewTelephone
- делаете выборку по классу нужных эллементов на странице
- обходите эллементы в цикле
- отправляете запрос к серверу
- выходите из функции

Ответ от сервера, то что вы в success в настройках запроса прописысваете, будет вызываться столько раз, сколько итераций прошел цикл (при условии что все запросы успешны). Причем вызываться этот код будет уже после того, как вы выйдете из функции GetNewTelephone. А если быть точнее, вы в вашем цикле только создаете запрос, как только вы его создали цикл переходит на следующую итерацию не дожидаясь завершения запроса. Собственно для этого нам и нужно определять обработчик в поле success, для этого придумали обещания.

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

[wkololo_4ever]

@Fesor спасибо за ответы. Как раз момент с созданием запрос не был понятен.

[Сергей Протько]

Словом, я наконец понял что вы не понимаете, что $.ajax по умолчанию является асинхронным вызовом, и считаете что success должен вызываться внутри каждой итерации, а не после того как вы уже пробежались по циклу.

[wkololo_4ever]

@Fesor сегодня сел со свежей головой и решил попробовать пофиксить мой вариант. Заменил эту строку var link = linkTpl.replace("%1", idNumber).replace("%2", idContact) и все заработало! Можете обьяснить, почему в моем варианте link = link.replace("-1", idNumber);
link = link.replace("-2", idContact); выходил баг?

[wkololo_4ever]

@Fesor кстати, весь процесс я понимал правильно, проблема была именно в том, что строка link не менялась и мне казалось, что каждый запрос выполняется по несколько раз. Теперь осталось понять, почему строка link не менялась.

[Сергей Протько]

@wkololo_4ever ну так вы на первой итерации убрали из link метки (-1 и -2) и на следующих итерациях оно не может их найти и соответственно не может изменить.

[wkololo_4ever]

@Fesor аааа, точно, большое спасибо за помощь!