如何在进行.ajax调用时使.scrollTop不跳动

Question

我正在做一些类似于无限画廊的事情。我的OnScroll函数检测滚动是否位于页面底部的100px处，如果是，则执行ajax调用，并将输出附加到div。

问题是closeToBottom函数太快了，所以有时它会从底部捕获100像素的滚动条两次，甚至4-5次，然后滚动条才向上滚动。

如何使closeToBottom更微妙，使我的ajax调用一次只被调用一次，并且滚动条立即向上滚动？

function onScroll(event) {
    // Check if we're within 100 pixels of the bottom edge of the browser window.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom) {

        $.ajax({

                url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset,
                cache: false
        }).done(function( html ) {
            offset = offset + numberposts;
            $("#tiles").append(html);


        });
}

Answer 1

您可以引入一个在ajax请求运行时设置的变量，只有在没有其他请求运行时才会启动另一个变量。如下所示：

var ajaxLoading = false;
function onScroll(event) {
    // Check if we're within 100 pixels of the bottom edge of the browser window.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom && !ajaxLoading) {
        ajaxLoading = true;
        $.ajax({

                url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset,
                cache: false
        }).done(function( html ) {
            offset = offset + numberposts;
            $("#tiles").append(html);
            ajaxLoading = false;

        });
}