Jquery AJAX请求加载两次

我正在构建一个无限滚动，当滚动条到达页面底部时，将从数据库中提取结果。除了一件小事外，这一切都很好。如果我快速向下滚动，它会两次获取结果，就像该函数执行两次一样。Jquery AJAX请求加载两次

这里是我的jQuery代码：

$(window).scroll(function() { 
    if($(window).scrollTop() == $(document).height() - $(window).height()) { 
     var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1]; 
     $('#loader').show(); 
     $.ajax({ 
      url: "ajax_loadmore.php?lCom=" + ID, 
      success: function (result) { 
       if(result) { 
        $('#moreComments').append(result); 
        $('#loader').hide(); 
       } else { 
        $('#loader').hide(); 
       } 
      } 
     }); 
    } 
});

来源

2012-07-10 Martin Forsstedt

Javascript is _somewhat_ single threaded;你是否尝试过简单地标记一个标志来指示已经调用了内容的ajax请求，从而简单地退出？ – Tejs 2012-07-10 14:05:44

作为除了@JamWaffles回答：

你可能只是return;退出，而不是调用request.abort();功能。否则，您将针对相同的数据对您的服务器进行两次AJAX请求=不必要的负载。然而，您应该在成功和错误回调中用request = null;重置请求对象。

PS。会发布这个评论，但我不能。

来源

2012-07-10 14:25:32

你的AJAX请求最有可能排队后面彼此，因为他们是异步，即使JavaScript的本身大多是单线程的。

您可以使用abort()方法确保一次只运行一个请求。您需要分配由$.ajax()返回给一个变量jqXHR对象：

var request; 

$(window).scroll(function() { 
    if($(window).scrollTop() == $(document).height() - $(window).height()) { 
     var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1]; 
     $('#loader').show(); 

     // Abort any currently executing request 
     if(request) { 
      request.abort(); 
     } 

     // Make a new request 
     request = $.ajax({ 
      url: "ajax_loadmore.php?lCom=" + ID, 
      success: function (result) { 
       if(result) { 
        $('#moreComments').append(result); 
        $('#loader').hide(); 
       } else { 
        $('#loader').hide(); 
       } 
      } 
     }); 
    } 
});

abort()是XMLHttpRequest object的原生功能，但它是由jQuery的jqXHR对象公开，因此可称为如常。

来源

2012-07-10 14:10:09 Bojangles

Thnx！这有帮助。我确实将它与下面的答案结合起来，以获得更快的结果。我现在确实有另外一个问题，那就是它在Firefox中出于某种原因无法正常工作。它适用于IE 9，Chrome和Safari ..任何已知的jQuery与Firefox的问题？ – 2012-07-10 15:12:58

你是否检查过FF的调试控制台是否有错误（或者如果你安装了Firebug的话）？ – Bojangles 2012-07-10 17:23:03

Jquery AJAX请求加载两次

回答

相关问题