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;

        });
}

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

1 个答案: