load () последовательно, а не одновременно с jQuery

Question

Я разрабатываю сайт, на котором я хочу получить все ссылки из панели навигации и загрузить div со связанных страниц в большой контейнер. То, что у меня есть, так это:

$('nav a').each(function(index){
    var to_load = $(this).attr('href') + '#slides section';
    $('<section>').load(to_load, function(){
        $('#slides').append($(this).html());
    });
});

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

Спасибо, куча заранее!

Answer 1

Я бы попробовал с async: false упомянутой jQuery.ajax документацией .Не знаю, работает ли он с load, но я бы поспорил.

Кроме того, по соображениям производительности не используйте:

$(this).attr('href') + '#slides section'

, но

this.href + '#slides section'

Чтобы не преобразовывать this в элемент jQuery (он нужен только для получения атрибута href).

Answer 2

Вы создаете рекурсивную функцию, которая вызывает себя всякий раз, когда .load завершается, гарантируя, таким образом, порядок:

// grab array of links
var links = $('nav a').map(function() {
    return this.href;
}).get();

function loadSlides() {
    $('<section>').load(links[0] + '#slides section', function() {
        $('#slides').append($(this).html());

        // remove first item of links array
        links.shift();
        loadSlides();
    });
}

loadSlides();

Answer 3

async: false может быть вариантом, как упомянуто @ marcosfromero

Вы можете также попробовать другой вариант вызова load после завершения предыдущего (ну, это выглядит как async:false)

var i = -1;  // this is because we will increment the value before using it
var collection = $('nav a');

function loadNext() {
    i++;
    if (i < collection.length) {
        var to_load = $(collection[i]).attr('href') + '#slides section';
        $('<section>').load(to_load, function(){
            $('#slides').append($(this).html());
            loadNext();
        });
    }
}

loadNext();

Answer 4

var loadTos = [];
$('nav a').each(function(index){
    loadTos.append($(this).attr('href') + '#slides section');
});
function load_link(to_load) {
    $('<section>').load(to_load, function(){
        $('#slides').append($(this).html());
        loadTos.length && load_link(loadTos.pop());
    });
}
if(loadTos.length) {
   loadTos = loadTos.reverse(); // make getting urls from first to last
   load_link(loadTos.pop());
}

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