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

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

3 个答案: