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