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

【问题标题】：How to load in data only one time when user scrolls to the bottom of the page?当用户滚动到页面底部时，如何仅加载一次数据？
【发布时间】：2012-07-06 08:30:12
【问题描述】：

我有一个从 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);
            });
    }
});

谢谢！

【问题讨论】：

标签： javascript ajax scroll jquery

【解决方案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;
        });
    }
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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;
        });
    }
});

【讨论】：