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

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