Question

我正在用php和api进行无限ajax滚动，但是我的数据在重复。我不想在用户结束页面时加载数据（完美运行）。当用户到达某个div（check_onload）时我想要的是什么，然后加载数据，但是在这种情况下数据是重复的。下面是我如何停止重复数据的代码。

<div id="post-data"></div>
<div style="display:none;" class="ajax-load"></div>
<div class="check_onload"></div>




<script type="text/javascript">

///this run Perfectly
 $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            var token = $(".tokenId").val();
            GetMoreData(token);
        }
    });



    ///Repeating or duplication the data
   $(window).on('scroll',function() {
        if (checkVisible($('#check_onload'))) {
            var token = $(".tokenId").val();
            GetMoreData(token);

        } else {

        }
    });

    function checkVisible( elm, eval ) {
        eval = eval || "object visible";
        var viewportHeight = $(window).height(), // Viewport Height
            scrolltop = $(window).scrollTop(), // Scroll Top
            y = $(elm).offset().top,
            elementHeight = $(elm).height();

        if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
        if (eval == "above") return ((y < (viewportHeight + scrolltop)));
    }


   function GetMoreData(token){
      $.ajax(
            {
                url: '/loadMoreData.php?token=' + token,
                type: "get",
                beforeSend: function()
                {
                    $('.ajax-load').show();
                }
            })
            .done(function(data)
            {
                $('.ajax-load').hide();
                $("#post-data").append(data.html);
                $("#tokenId").val(data.token);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                  alert('server not responding...');
            });
    }
</script>

Answer 1

您有2个窗口滚动事件被触发，导致重复，这是因为每次用户滚动页面时，您两次使用相同的令牌从服务器请求数据。我将不得不假设删除其中的1个可以解决您的问题。

这是唯一的解决方案，没有看到您的服务器代码。

结果重复无限滚动API PHP

1 个答案: