Question

我在wamp服务器上使用php和jquery构建rss feed阅读器。

在页面加载时，我有网站列表，

<ul class='list'>
     <li>Site1 <input type='hidden' value='http://site1.rss/' /></li>
     <li>Site2 <input type='hidden' value='http://site2.rss/' /></li>
     <li>Site3 <input type='hidden' value='http://site3.rss/' /></li>
</ul>

从“getFeed.php”页面获取供稿时，我使用jquery代码

$('.list li').live('click', function() {
     var url = $(this).find('input').val();
     $.post("getFeed.php",
            {url:url},
            function(data) {
                 $('.feed').html(data);
            });
});

这段代码就像一个魅力。现在，如果我在第一个网站的请求完成之前点击另一个网站，就会出现问题。

那时如果第一个站点的响应很慢，那么我得到了第二个站点的结果。但是当第一个站点响应较晚时，结果会更改为第一个站点。

问题类似于[问题]：Abort Ajax requests using jQuery

我已经尝试过此代码，但无法正常使用

$(document).ready(function() {
     var xhr;

     $('.list li').live('click', function() {
          xhr.abort();
          alert("testing flag");
          var url = $(this).find('input').val();
          xhr = $.post("getFeed.php",
                 {url:url},
                 function(data) {
                      $('.feed').html(data);
                 });
     });
})

但是，此代码无法发送请求。所以，我在xhr.abort（）之后放了一个测试警告标志。但警报也不起作用。可能是xhr.abort（）中的问题;线。

Answer 1

xhr.abort();会导致错误，因为第一次调用函数时xhr未定义，请尝试类似xhr && xhr.abort();

的内容

Answer 2

你确定要中止吗？我甚至不确定它是否适用于所有浏览器，如果确实如此，用户可能会惊讶于他没有得到他点击的内容。我会

a）使用.on代替不推荐使用的.live和 b）在获取结果或更好的情况下阻止点击：排队点击

请参阅：What are queues in jQuery?

有一个ajax队列示例

Jquery ajax发布请求与旧请求重叠

2 个答案: