Как правильно сделать цикл с ajax-запросами?

Question

[Alexei Lavrov]

Сделал цикл, который перебирает ссылки на странице и проставляет рядом с ними количество комментариев. И всё бы хорошо, но есть один момент. При каждом выполнении скрипта цифры показываются разные и количество этих цифр тоже разное. Есть подозрение, что эти запросы как-то путаются. Как правильно организовать такой процесс?

Код на фидле - https://jsfiddle.net/alexeilavrov/gaL7udq9/

Comments

[iljaGolubev]

Ваш пример не работает. Для начала добавьте в вызовы $.ajax({

async: false, 
dataType: 'jsonp',

и приведите скрипт в хоть какое-то рабочее состояние, чтобы было понятно, что, собственно, вы хоите сделать.
----
Советую изменить функцию так, чтобы она принимала url и id елемента в котором нужно поставить количество коментариев. В цикле вызывайте функцию для каждой ссылки, а в success - добавляйте к ней количество коментариев.

[Robot Chappie]

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

[iljaGolubev]

Robot Chappie,

Для начала ....

[Alexei Lavrov]

iljaGolubev, Спасибо. У меня, кстати, браузер блокирует async: false. Им еще можно пользоваться?

[iljaGolubev]

Robot Chappie, хм..
api.jquery.com/jquery.ajax

Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation

async: false нужен чтобы дождаться выполнения всех ajax и получить что-то отличное от var sum = 0;
sum изменяется в последнем success
но функция getSumComments возвращает не sum, а jqXHR (потому что return $.ajax...)
В общем там всё неправильно.

Answer 1

[Никита]

1. Надо вызывать метод для всех ссылок

$('a.article-link').each(function(key, item) {
getSumComments($(item).attr('href'));
})

2. ajax запросы работае асинхронно, поэтому

var sumComments = getSumComments('https://www.metrtv.ru/articles/second_estate/11617');
console.log(sumComments);
не сработает, т.к вернет объект ajax запроса, а не ваше число

нужно передать вторым аргументом ссылку с которой работает, чтобы относительно нее изменять dom
getSumComments($(item).attr('href'), $(item));

и при получении ответа
sum = responseHC.data[0].cm2;
$(item).closest('li').find('.comments-counter').html(sum) // Предварительно создав все нужные блоки