好的,下面的代码“有效”,当你滚动到页面底部时,会触发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();
}
}
});
}
});
答案 0 :(得分:46)
尝试存储某种数据,用于存储页面当前是否正在加载新项目。也许是这样的:
$(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,
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);
}
});
}
});
在发送Ajax请求之前,会清除一个标志,表示该文档尚未准备好接收更多Ajax请求。一旦Ajax成功完成,它就会将标志设置为true,并且可以触发更多请求。
答案 1 :(得分:0)
是的,这非常有效,您可以创建一个变量来判断 ajax 当前是否正在从脚本中获取更多数据,以便您知道是否要发送另一个 ajax 请求。这使得无限滚动更加平滑且故障更少,因此当用户到达断点时它不会一次触发很多次。