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

基本上，这段代码效果很好＆amp;它的方式。除了一件事，我只是在服务器上传时发现了这一点。如果在页面加载时单击另一个链接，则链接会相互重叠。

一个很好的例子就是让我说我点击了链接1，当它点击链接2＆amp;然后链接3.会发生的是有时它会加载链接2而不是3.然后当我点击，说链接1.或者甚至链接4时，可能出现的页面来自链接3.那里有＃s; s一种排队，使他们排队＆amp;如果某人没耐心等待页面加载，就搞砸了。

我正在寻找的东西可能是一种中止之前点击事件的方法。如果在加载页面时激活它，则从新的开始。我已经尝试过队列（）＆amp; dequeue（）那些但我无法理解它的作用，所以到目前为止我还没有取得任何成功。

任何帮助都会非常棒。

Answer 1

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

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链接保留前一次点击的链接

1 个答案: