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对象公开,因此可以照常调用。