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 documentation。 不知道它是否适用于load，但我敢打赌它的确如此。

而且，出于性能原因，不要使用：

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

但

this.href + '#slides section' 

为了避免转换成this一个jQuery元素（你只需要它来获得href属性）。

Answer 2

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()); 
} 

此代码会按时间顺序加载网址。他们将被逐一加载。

Answer 3

async: false可能是一种选择，如@marcosfromero

提到您不妨尝试一前一后呼叫负载的另一种选择完成（当然，这看起来很像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

您创建一个递归函数，只要.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();