load（）顺序，而不是与jQuery同时

我正在开发一个网站，我希望从导航栏中获取所有链接，并将链接页面中的div加载到一个大容器中。 到目前为止我所拥有的是以下内容：

$('nav a').each(function(index){ var to_load = $(this).attr('href') + '#slides 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

 var loadTos = []; $('nav a').each(function(index){ loadTos.append($(this).attr('href') + '#slides section'); }); function load_link(to_load) { $('
').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。 它们将被逐一装载。

Answer 3

如@marcosfromero所述， async: false可能是一个选项

您可以尝试在上一个完成后调用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'; $('
').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() { $('
').load(links[0] + '#slides section', function() { $('#slides').append($(this).html()); // remove first item of links array links.shift(); loadSlides(); }); } loadSlides();