javascript - 当用户滚动到页面底部时，如何仅加载一次数据？

Question

我有一个从 PHP 脚本动态加载 HTML 的页面，当用户滚动到页面底部时，该脚本会抓取另一个站点的图像链接。问题是脚本需要一段时间才能完成，并且检测用户已滚动到页面底部的功能会被触发多次，并且 HTML 会多次加载，从而导致图像集重复。有没有一种简单的方法让 javascript 等到加载 HTML 后再让函数再次运行？检测/加载脚本如下所示：

$(window).scroll(function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        //alert("at the bottom.");
        $.post("function.php", function(data) {
            $('#wrap').append(data);
            });
    }
});

谢谢！

Answer 1

var loadAgain = true;
$(window).scroll(function() {
    if (loadAgain && $(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        loadAgain = false;
        //alert("at the bottom.");
        $.post("function.php", function(data) {
            $('#wrap').append(data);
            loadAgain = true;
        });
    }
});

Answer 2

设置布尔状态以确保事件在完成之前不会被多次触发。像这样：

    var loading = false;
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        if (!loading) { 
            loading = true;
            $.post("function.php", function () {
                loading = false;
            })
        }
    }

Answer 3

试试这个：

var loadFinished = true;
$(window).scroll(function() {
    if (loadFinished && ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)) {
        //alert("at the bottom.");
        loadFinished = false;
        $.post("function.php", function(data) {
            $('#wrap').append(data);
            loadFinished = true;
        });
    }
});