javascript - 在加载更多用户之前滚动未到达页面末尾

Question

我在页面上向下滚动时正在加载信息。但是目前，当我开始滚动时，正在下载更多信息以进行显示。有没有办法让滚动条到达页面末尾显示一条快速消息，持续 2 秒“加载更多图像”，然后显示下一批。

 function updateStatus() {

// Load more users on Scroll
$('#main').scroll(function () {
    if ($('#main').scrollTop() >= $(document).height() - $('#main').height()) {
        $('#status').text('Loading more items...');
        $('#users').append(Next());
    }
    setTimeout('updateStatus();', 1500);
});
}

在建议的答案更新之后

function updateStatus() {
        $('#users').append(Next());
    }

    // Load more users on Scroll
    $(document).ready(function(){
        $('#main').scroll(function () {
            if ($('#main').scrollTop() >= ($(document).height() - $('#main').height())) {
                $('#status').text('Loading more items...');
            }

        });
        setTimeout(updateStatus, 2500);
    });

使用当前编辑，当我滚动到页面底部时，它会加载接下来的 20 个用户，但再次到达页面末尾时，它不再加载。但是当我使用 setTimeout(updateStatus, 2500) 并将它放在 $('#main').scroll... 中时，当我滚动时没有一点到达底部的页面数据在到达页面末尾之前不断加载和加载。

---

Next = function () {
    var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
    $.views.Roster.GetPage("/api/Roster", 9, _page);
};

$.views.Roster.GetPage = function (url, id, pageNumber) {
        $.grain.Ajax.Get({
            Url: url,
            DataToSubmit: { pageNumber: pageNumber, id: id },
            DataType: "json",
            OnSuccess: function (data, status, jqXHR) {
                $.views.Roster.RosterViewModel.AddUsers(data);
                $.views.Roster.ViewModel.CurrentPage(pageNumber);
            }
        });
    };

Answer 1

也许您正在寻找这样的东西？ (未经测试的代码)

function updateStatus() {
    $('#status').text('');
    $('#users').append(Next());
}

// Load more users on Scroll
$('#main').scroll(function () {
    if ($('#main').scrollTop() >= $(document).height() - $('#main').height()) {
        $('#status').text('Loading more items...');
        setTimeout(updateStatus, 1500);
    }

});