在滚动 laravel ajax 上加载更多数据

Question

我按照 youtube 上的代码，一切正常，但是当我连续滚动鼠标时，最后一页加载重复多次，有人可以帮我修复这个错误，我很感激！

 <div class="product endless-pagination" data-next-page="{{$product->nextPageUrl()}}" data-last-page="{{$product->lastPage()}}">
                @include('user.blocks.d_test')
            </div>

<script type="text/javascript">

    $(document).ready(function () {

        $(window).scroll(fetchPost);

        function fetchPost() {

            var page = $('.endless-pagination').data('next-page');
            //var lastpage=$('.endless-pagination').data('last-page');
            if (page !== null && page.length > 0) {

                $('.loading').show();

                if ($(window).height()+ $(window).scrollTop()+100 >= $(document).height()) {

                    clearTimeout($.data(this, "scrollCheck"));

                        $.data(this, "scrollCheck", setTimeout(function () {

                            $.get(page, function (data) {
                                $('.endless-pagination').data('next-page', data.next_page);
                                $('.loading').hide();
                                $('.product').append(data.product);
                            })

                        }, 350))

                }

            }

        }
    })
</script>

Answer 1

你应该试试这个教程。它对我有用，您不必重新发明轮子： https://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll