Последовательные ajax запросы

279

25 апреля 2017, 08:00

Прошу помощи связывании в последовательном связывании ajax запросов.(пример ниже работает некорректно). Правильная последовательность 1-2-3-4.

HTML:

<div id="1" data-loader="../components/header.html"></div>
<div id="2" data-loader="../components/navigation.html"></div>
<div id="3" data-loader="../components/body.html"></div>
<div id="4" data-loader="../components/footer.html"></div>

JS:

<script>
var url;
var id;
var j=1;

$(document).ready(function () {
$('div[data-loader]').each(function() {
    url=$(this).attr("data-loader");
    id=$(this).attr("id");  
         $.get(url, function(data){
             $('#'+j).html(data);
             j++;
         });
    });
});

Answer 1

Проблема в том, что код внутри $.get будет выполнятся после всех each. Т.к. неизвестно заранее в каком порядке придут ответы то невозможно заранее предугадать значение j в каждом запросе.

Для того чтоб было последовательное выставление $('#'+1), $('#'+2), $('#'+3), нужно сохранить значение j где нить в локальном замыкании внутри each (чтобы каждый вызов each сохранял свой j).

Так должно работать:

var url;
var id;
var j=1;

$(document).ready(function () {
$('div[data-loader]').each(function() {
    url=$(this).attr("data-loader");
    id=$(this).attr("id");  
    var tmp_j = j++;
    $.get(url, function(data){
          $('#'+tmp_j).html(data);
    });
});
});