ajax链接保留了上次点击的链接

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。可能出现的页面来自链接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;
})

这应该按照加载顺序加载最后一个按下的内容，我看到的另一个问题是，你可能会一次又一次地加载相同的内容，你应该将内容保存在数组中，并检查它是否已经加载，以及它是否使用已经加载的内容而不是再次加载内容。

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

这将使第2、第3、第4。。。加载同一页面的时间，因为它没有执行另一个get请求。