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

Question

这有点难以解释。我对无限滚动功能有疑问。当我向下滚动内容时，在某个滚动位置上，我调用一个函数来将内容加载到页面上。这是该函数:

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 次滚动调用，这形成了一个循环。

Answer 1

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

例如，在页面中使用一个类来表示正在加载，或者在加载时使用 bool 变量为 true，然后使用回调函数将其重置为 false，以完成 ajax

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
    });

    // ...
}

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