jQuery-每个特定滚动位置一个触发器

jQuery - One trigger per each certain scroll position

本文关键字：一个 触发器 滚动 jQuery- 位置      更新时间：2023-09-26

这有点难以解释。我对无限滚动功能有意见。当我向下滚动我的内容时，在特定的滚动位置，我调用一个函数来在页面上加载我的内容。这个功能是：

var page = 1,
    total = 10; // example
$(window).on("scroll", function() {
    var search = $(document).scrollTop(),
        position = ($(document).height() - (($(".footer").height() * 2) - 50) - $(".page-heading").height() - $(".page-footer").height() - $(".navbar-toalc").height());
    if (search > position && page <= total) {
        triggerLoad(page);
        console.log(page);
        page++;
    }
});

当我得到某个滚动点时，我会触发函数triggerLoad()，其中是ajax调用和隐藏最后一页按钮的函数。那部分做得不错。

问题：

上面的函数立即使所有页面循环。我需要一些东西来延迟循环，直到加载新内容、测量页面并等待滚动到新位置。Measuremant运行良好，但在加载内容之前，我有8个滚动调用，这就形成了一个循环。

一个非常简单的方法是"检查"您是否已经在执行triggerLoad

例如，页面上有一个类，它表示正在加载，或者在加载时使用布尔变量true，然后使用ajax完整的回调函数重置为false

var page = 1,
    total = 10,  // example 
    isLoading = false;     // <<-------
$(window).on("scroll", function() {
    var search = $(document).scrollTop(),
        position = ($(document).height() - (($(".footer").height() * 2) - 50) - $(".page-heading").height() - $(".page-footer").height() - $(".navbar-toalc").height());
    if (search > position && page <= total && isLoading === false) {
        isLoading = true;  
        triggerLoad(page, function(){ isLoading = false; });
        console.log(page);
        page++;
    }
});

记住添加回调函数作为ajax 的完整回调

function triggerLoad(_page, _callback){
    // ...
    $.ajax({
        // ...
        complete: _callback
    });
    // ...
}

这不是一个非常干净的解决方案，但应该可以很好地工作

相关文章：