javascript - 当滚动条在 div 底部停留时间过长时，防止 jquery 获取和添加重复数据？

Question

我有一个 div，当用户滚动到 div 的底部时，jquery 将从其他页面获取更多数据并将其添加到 div。我的问题是有时滚动条在div底部停留的时间太长，所以它多次执行jquery语句。 Jquery 获取重复数据并将其添加到 div。当滚动条在 div 底部停留时间过长时，如何防止 jquery 获取和添加重复数据？我的代码:

function scrollalert(){
    var elements = $(".messagepiecetime");
    var lastmsgid = elements.eq(elements.length - 1).attr('id');        
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
    var scrolloffset=20;
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
    {   
        $.get('test7a.php?lastmsgID=' + lastmsgid, '', function(newitems){
            $('#content').append(newitems);                             
        }); 
    }
    setTimeout('scrollalert();', 1000);
}

setTimeout('scrollalert();', 1000);// 这就是问题发生的地方。如果我将它设置为 3000 毫秒，问题就解决了。如果我将它设置为 1 毫秒，输出将是 8 个重复数据。我知道设置 3k 毫秒可以解决问题，但我不希望用户在每次滚动到底部时等待 3 秒来获取新数据。有没有其他方法可以不使用 setTimeout 3 秒来修复它？

Answer 1

您可以设置一个全局变量来标记是否应加载更多数据。

var loadMore = true;

function scrollalert() {
    var elements = $(".messagepiecetime");
    var lastmsgid = elements.eq(elements.length - 1).attr('id');
    var scrolltop = $('#scrollbox').attr('scrollTop');
    var scrollheight = $('#scrollbox').attr('scrollHeight');
    var windowheight = $('#scrollbox').attr('clientHeight');
    var scrolloffset = 20;
    if ((scrolltop >= (scrollheight - (windowheight + scrolloffset))) && loadMore) {
        loadMore = false;
        $.get('test7a.php?lastmsgID=' + lastmsgid, '', function(newitems) {
            $('#content').append(newitems);
            loadMore = true;
        });
    }
    setTimeout('scrollalert();', 1000);
}