javascript - jQuery 滚动事件每次滚动触发一次

Question

我有一些 jQuery 代码来检查我是否已滚动到窗口底部。

$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        appendToGrid();
    }
})

我的appendToGrid()函数将用户滚动到页面顶部并添加内容。问题是，我需要每个滚动调用一次这个函数。正如我现在所拥有的，每个滚动都会多次调用它。

如果我把它改成

$(window).one('scroll',function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        appendToGrid();
    }
});

它总共只会触发一次，但我需要它每次滚动时触发一次，以便用户可以滚动到底部并继续发送回页面顶部。

我也尝试过以下方法，但它仍然会触发多次。

var fired = false;
$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() == $(document).height() && !fired) {
        fired = true;
        appendToGrid();
        fired = false;
    }
})

Answer 1

一旦调用appendToGrid，您就可以添加一个冷却计时器。这与您的 fired 标志类似，但它仅在 2000 毫秒等待后重置。您可以将时间调整为感觉最好的时间。

var recentScroll = false;
$(window).on('scroll',function() {
    if(!recentScroll && $(window).scrollTop() + $(window).height() == $(document).height()) {
        appendToGrid();
        recentScroll = true;
        window.setTimeout(() => { recentScroll = false; }, 2000)
    }
});