Jquery AJAX请求加载两次

当滚动器碰到页面底部时,我正在构建一个无限的Scroll,它从数据库中获取结果。 除了一件小事之外,一切正常; 如果我快速向下滚动,它会取两次结果,就好像该函数执行两次一样。

这是我的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(); } } }); } }); 

作为@JamWaffles的补充回答:

您可以退回该函数return; 而不是调用request.abort(); 。 否则,您将为服务器的相同数据=不必要的负载发出两个AJAX请求。 但是,您应该使用request = null;重置请求对象request = null; 在成功和错误回调中。

PS。 将此作为评论发布,但我不能。

你的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对象的本机函数,但它由jQuery的jqXHR对象公开,因此可以照常调用。