好的，下面的代码“工作”，当你滚动到页面的底部，AJAX函数被触发，结果附加到页面上的#postswrapper div。
问题是：如果我在页面底部快速滚动，AJAX会触发几次，并将多组结果加载到#postswrapper div中(附加的“不需要的”数量)由多少额外的滚动确定事件被快速滚动触发)。
最终，我只需要在每次用户到达底部时提供一组结果。我已经尝试添加计时器等等，但没有效果。显然，在DOM中存储额外的滚动操作，然后按顺序触发它们。
有任何想法吗？
我正在使用jquery.1.4.4.js，如果这有助于任何人。而在这种情况下，e.preventDefault()不起作用。
$(window).scroll(function(e) {
e.preventDefault();
if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
$('div#loadmoreajaxloader').show();
$.ajax({
cache: false,url: 'loadmore.PHP?lastid=' + $('.postitem:last').attr('id'),success: function(html) {
if (html) {
$('#postswrapper').append(html);
$('div#loadmoreajaxloader').hide();
} else {
$('div#loadmoreajaxloader').html();
}
}
});
}
});
解决方法
尝试存储一些存储页面是否正在加载新项目的数据。也许这样：
$(window).data('ajaxready',true).scroll(function(e) {
if ($(window).data('ajaxready') == false) return;
if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
$('div#loadmoreajaxloader').show();
$(window).data('ajaxready',false);
$.ajax({
cache: false,success: function(html) {
if (html) {
$('#postswrapper').append(html);
$('div#loadmoreajaxloader').hide();
} else {
$('div#loadmoreajaxloader').html();
}
$(window).data('ajaxready',true);
}
});
}
});
在发送Ajax请求之前，将清除一个标志，表示文档尚未准备好进行更多Ajax请求。一旦Ajax成功完成，它将标志设置为true，并且可以触发更多的请求。
