AJAX POST的无限滚动触发多次而不是1次

Question

我一直在学习创建无限滚动/延迟加载的教程。https://www.youtube.com/watch?v=oi1S-BpoMQY&feature=youtu.be

除了当我滚动时AJAX会多次触发POST而不是1次之外，我的一切都正常工作。

$(document).ready(function() {
var page_num = 1;
load_page(page_num, false);
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
page_num++;
load_page(page_num, false)
}
}); 
});

function load_page(page_num, loading) {
if (loading == false) {
loading = true;
$.ajax({
url: 'action/post.php',
type: "post",
data: {
page_num: page_num
},
beforeSend: function() {
$('#ajax-loader').show();
return;
}
}).done(function(data) {
$('#ajax-loader').hide();
loading = false;
$("#dynamic-posts").append(data);
}).fail(function(jqXHR, ajaxOptions, thrownError) {
$('#ajax-loader').hide();
});
}
}

Answer 1

问题似乎在文档中。height-100。我把它改成50，它开始工作了。任何超过80的都会破坏卷轴。

Answer 2

我观察到变量加载总是错误的，因为它是作为参数发送的。我移动了作用域变量加载。它有助于按时间发送1个ajax。

$(document).ready(function() {
var page_num = 1;
var loading = false;
load_page(page_num);

$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
page_num++;
load_page(page_num)
}
}); 
});

function load_page(page_num) {
if (loading == false) {
loading = true;
$.ajax({
url: 'action/post.php',
type: "post",
data: {
page_num: page_num
},
beforeSend: function() {
$('#ajax-loader').show();
return;
}
}).done(function(data) {
$('#ajax-loader').hide();
loading = false;
$("#dynamic-posts").append(data);
}).fail(function(jqXHR, ajaxOptions, thrownError) {
$('#ajax-loader').hide();
loading = false;
});
}
}