Почему у ajax при foreach функция в success срабатывает только после проработки всего массива?

Question

[Сергей Миронов]

Бьюсь уже второй день и никак не могу понять.

Есть код:

for (l = 0; l < obj.length; l++) {
$.ajax({
type: "POST",
dataType: "json",
url: ссылка,
data: параметры,
contentType: false,
processData: false,
success: function(json) {
alert("asdf");
document.getElementById('product_image_files').style.display = 'none';
},
});
}

Это код должен обрабатывать массив пошагово. Обрабатывает первый элемент, всплывает alert, product_image_files исчезает. Дальше второй и т.д.

Проблема в том, что product_image_files исчезает только после обработки всех элементов, но alert почему то выходит вовремя.

Происходит все так: первый элемент обработался, всплывает alert, дальше должен исчезнуть product_image_files, но он не исчезает. Начинается обработка последнего элемента, всплывает alert и только тут исчезает product_image_files. Ребята подскажите что не так?

Answer 1

[alexalexes]

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

document.getElementById('product_image_files').style.display = 'none';

PS:
for (l = 0; l < obj.length; l++)
Вы в курсе, что l в таком описании всегда будет создаваться в глобальном объекте window, а не локально, если цикл описан в какой-нибудь функции?
Если цикл работает по принципу "отработал и забыл, что было в счетчике", то никогда не забывайте писать var.
for (var l = 0; l < obj.length; l++)

Comments

[Сергей Миронов]

var исправил.

Да, alert стопорит. Проблема в том, что когда отвечаешь на всплывающее окно вот этот код:

document.getElementById('product_image_files').style.display = 'none';

не работает, хотя по идее должен. Не понимаю почему этот код срабатывает только после обработки всего массива, а не пошагово

[alexalexes]

Сначала прорабатывается цикл, он создает целую серию ajax-запросов.
Интерпретатор JS помечает у себя, что когда-то через вечность (по машинным меркам), если придет ответ от определенного запроса, он должен оживить callback-функцию success (если не придет, то error-функцию в ajax, но вы ее не описали).
Интерпретатор идет дальше по своим делам.
Проходит вечность....
Приходит ответ.
Интерпретатор реагирует на это событие подымая callback-функция с алертом.
Вот так оно работает.

[Сергей Миронов]

alexalexes, в callback функции success у меня две строчки:

1) Вызывает alert
2) Исчезает div

Если бы в callback функции success все шло с запозданием, то alert появлялся бы в после обработки массива. Но alert появляется вовремя. Т.е. один элемент обрабатывается, дальше от аякса идет callback ответ в success и всплывает alert. Я закрываю окно, div не исчезает и начинает обрабатываться второй элемент. Опять появляется alert и т.к. это последний элемент в массиве, исчезает и div. Почему так происходит не знаю

[Сергей Миронов]

Вопрос наверно в том, как не запускать второй цикл, пока все что в колбэкэ не отработается

[alexalexes]

Я могу предложить только рекурсию, чтобы поток цикла не тиражировал множество запросов, пока не придет ответ. То есть, вообще, избавляемся от for.

<style>
      html, body
      {
        margin: 0;
        padding: 0;
      }
      div#product_image_files
      {
        display: block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
      <div id="product_image_files">
      </div>
    <script>
      /* Функция для имитации задержки времени */
      function randomInteger(min, max)
      {
        return Math.round(min - 0.5 + Math.random() * (max - min + 1));
      }
      /* Функция для последовательной отправки сообщений через рекурсию */
      function send_message(i, count)
      {
        console.log('send i = ' + i); // фиксируем в логах, что обратились к функции отправки
        var delay = randomInteger(50, 500); // получаем некую задержку передачи сообщения
        setTimeout(function() // Имитируем контструкцию ajax, с callback-функцией
        {
          console.log('response i = ' + i); // фиксируем в логах, что получили ajax-ответ
          alert(delay); // выводим значение текущей задержки
          console.log('after alert i = ' + i); // фиксируем момент, когда выполнение двинулось дальше алерта
          i++; // наращиваем счетчик итерации
          if(i < count) // не дошли до макс. кол-ва собщений, отправляем дальше
            send_message(i, count);
          else
          {
            var element = document.getElementById('product_image_files');
            element.style.display = 'none'; // что-то делаем с узлом на странице
            console.log('change elem display i = ' + i); // фиксируем, что отработали работу с узлом
            console.log('Finish!');
          }
        }, delay);
      }
      send_message(0, 5); // делаем первую отправку - начало рекурсии
    </script>

PS: И если вам нужно на последнем сообщении что-то сделать с узлом, то эту манипуляцию можно заложить в else ветку if(i < count)

[Сергей Миронов]

Да, так работает. Спасибо