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

Question

我这里有这个，但我不确定我是应该在那里回复还是制作一个新的，所以我决定制作一个新的，因为它完全不同（或者 sequel) 问题。

有问题的代码在这里：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);
        });
    });
});

基本上，这段代码工作得很好，而且它应该是这样的。除了一件事，我是在将它上传到服务器时才发现的。如果在加载页面时单击另一个 link，则 link 会相互重叠。

一个很好的例子就是我点击了 link 1，在加载时我点击了 link 2，然后点击了 link 3。有时它会加载向上 link 2 而不是 3。然后当我单击时，说 link 1。甚至 link 4，可能出现的页面来自 link 3。有如果有人没有足够的耐心等待页面加载，就会让他们排队并弄乱的队列。

我正在寻找的可能是一种中止上一个点击事件并从新点击事件开始的方法（如果它在页面加载时被激活）。我已经尝试过 queue() 和 dequeue()，但我无法理解它的作用，所以到目前为止我仍然没有取得任何成功。

任何帮助都会很棒。

Answer 1

您遇到的问题是，无论显示 link 是什么 "last to load"，它们并不总是以与单击它们相同的顺序加载，因为并非所有 links可能具有相同的文件大小（有些加载时间比其他加载时间长）。因此，您需要一种方法来跟踪最后按下哪个 link。我建议一个简单的全局变量，记录最后一次请求。

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

这将使内容在第二次、第三次、第四次...加载同一页面时更快，因为它不执行另一个获取请求。

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

ajax links retaining links from previous click

javascript

queue

ajax

jquery

hyperlink