ajax鏈接保留鏈接從以前的點擊

Question

我有這個previous question在這裏，但我不知道如果我應該回復那裏或做一個新的，所以我決定做一個新的，因爲它是一個不同的（或續集）問題的種類。

有問題的代碼是在這裏：http://jsfiddle.net/sab60pzd/2/

的jQuery：

$('.load-me').click(function(e){ 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var txt = $(this).text(); 
    $('.main-container').fadeOut(200, function(){ 
     $(this).load(url, function() { 
      // for demo: 
      $(this).html('Loaded some awesome content from ' + txt).slideDown(200); 
     }); 
    }); 
}); 

基本上，此代碼的偉大工程&的方式應該。除了一件事之外，我只在將它上載到服務器上時才發現這一點。如果在加載頁面時單擊其他鏈接，則鏈接會彼此重疊。

一個很好的例子可以讓我們說，我點擊鏈接1，而它的加載我點擊鏈接2 &然後鏈接3.發生什麼是有時它會加載鏈接2而不是3.然後，當我點擊，說鏈接1.甚至鏈接4也許，會出現的頁面是從鏈接3.有排隊的隊列&如果有人沒有足夠的耐心等待頁面加載，會變得混亂。

我正在尋找的可能是一種方法來中止以前的單擊事件&如果在頁面加載時激活它，則以新的開始。我已經嘗試過隊列（）& dequeue（），但我無法掌握它的作用，所以到目前爲止我還沒有取得任何成功。

任何幫助將真的很棒。

Answer 1

你遇到的問題是，顯示的是「最後加載」的任何鏈接，它們並不總是按照它們被單擊的順序加載，因爲並不是所有鏈接都可能具有相同的文件大小加載時間比其他時間長）。所以你需要一種方法來跟蹤哪個鏈接最後被按下。 Id建議記錄最後一個請求的簡單全局變量。

var lastURL; 
$(".load-me").on("click", function(){ 
    var url = $(this).attr("href"); 
    lastURL = url; 
    (function(){ 
    var thisURL = url; 
    $.get(url, function(x){ 
     if(thisURL==lastURL) 
     $(".main-container").html(x); 
    }); 
    }()); // Anon function for scoping thisURL; 
}) 

這應該加載最後一個壓他們加載順序的reguarless，另一個問題我看到的是你可能會潛在地一遍又一遍地加載相同的內容，你應該將內容保存在一個數組，並檢查看看它是否已經加載，以及它是否使用已經加載的內容而不是再次加載內容。

var lastURL; 
var contents = []; 
$(".load-me").on("click", function(){ 
    var url = $(this).attr("href"); 
    lastURL = url; 
    (function(){ 
    var thisURL = url; 
    for(var i=0;i<content.length;i++){ 
     if(content[i].url == thisURL){ 
     $(".main-container").html(content[i].content); 
     return; // kills the anon function 
     } 
    } 
    $.get(url, function(x){ 
     contents.push({ 
     url: thisURL, 
     content: x 
     }); 
     if(thisURL==lastURL) 
     $(".main-container").html(x); 
    }); 
    }()); // Anon function for scoping thisURL; 
}) 

這將使內容加載速度更快的第二，第三，第四......時間，同樣的頁面加載，因爲它沒有這樣做的另一個GET請求。