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请求。