ajax - 阻止 .ajax 双重加载内容

Question

我有以下代码，当用户滚动到页面底部时加载内容。问题是，如果滚动太快，则会双重加载内容。我可以通过哪些方式更改代码来防止这种情况发生？

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
        $('div#ajaxResults').show();
        $.ajax({
            url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    $("#messages").append(html);
                    $('#ajaxResults').hide();
                }else{
                    $('#ajaxResults').html('<center>None.</center>');
                }
            }
        });
    }
});

我需要该解决方案能够多次工作。此脚本会加载接下来的 5 条消息，但可能会加载数百条消息。它的工作方式应该与 facebook 或 twitter 加载更新的方式相同。

Answer 1

解决方案:

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
      var lastid = $(".postitem:last").attr("id");
        $('div#ajaxResults').show();
        $.ajax({
            url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    if(lastid == $(".postitem:last").attr("id")){
                    $("#messages").append(html);
                    $('#ajaxResults').hide();
                            }
                }else{
                    $('#ajaxResults').html('<center>None.</center>');
                }
            }
        });
    }
});

添加一个变量，用于在加载ajax之前检查lastid，然后仅在该变量==文档的最后一个id时附加html。这样，如果 ajax 已经加载，则两者将不相等，并且不会发布更新。