javascript - JQuery 滚动操作重复了结果

Question

当页面到达末尾时，我必须通过 ajax 调用加载更多产品。

<script>
$(window).scroll(function() {

    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
        var _token = '{{ csrf_token() }}';
        var theurl = 'homePaginate';
        console.log(skip_arr);
        $.ajax({
            type: 'post',
            url: theurl,
            data:{_token:_token,page:page,avoid:skip_arr},
            dataType: 'json',
            success: function (data) {
                page+=1;
                printProducts(data,false,true,true)

            }
        });
    }
});

我使用一个函数循环我的产品来打印它，在ajax调用中我发送页号，有时我需要避免显示某些产品

function printProducts(data,is_ad,get_void,is_animate) {
    console.log(page);
    for (i=0;i< data.length;i++){
        var id = '#col'+columnIndex;

        columnIndex++;
        if (columnIndex == 6){
            columnIndex = 1;
        }
        var stars = '';

        for(star = 0 ;star < Math.floor(data[i]['rate']);star++){
            stars += '<i class="fas fa-star"></i>';
        }
        var fraction = data[i]['rate']%1;
        if (fraction > 0 ){
            stars += '<i class="fas fa-star-half-alt"></i>';
            for(star = 0 ;star < 4-data[i]['rate'];star++){
                stars += '<i class="far fa-star"></i>';
            }

        }else{
            for(star = 0 ;star < 5-data[i]['rate'];star++){
                stars += '<i class="far fa-star"></i>';
            }
        }
        var discount ='';
        if (data[i]['runningDiscount']){
            discount = '<span class="discount-tag">'+data[i]['discount']['valuePercentage']+'% Off</span>';
        }
        if(get_void){
            skip_arr.push(data[i]['id']);
        }

        var isFavorite = data[i]['isFavourite']?'fas':'far';

        var image = '{{ url('') }}'+'/'+data[i]["image"];

        var url = '{{ url('product') }}'+'/'+data[i]["id"];

        var quick_cart = '';
        if (data[i]["quickCart"] === true){
            quick_cart = 'class="quick-add" data-item-id="'+data[i]['item']["id"]+'"';
        }else{
            quick_cart = 'href="'+url+'"';
        }

        var ad = '';
        if (is_ad) ad = ' <span class="ad">Ad</span>';

        var animate = '';
        if(is_animate){
            animate = ' animated  fadeInDown ';
        }
        var product = '<div class="col-xs-12 product'+animate+'" data-id="'+id+'">\n' +
            '                                <div class="row product-body">\n' +ad+ // print ad tag
            '                                    <span class="actions">\n' +
            '                                        <a '+quick_cart+'>\n' +
            '                                            <img src="{{ asset("site_assets/img/cart.png") }}" class="product-cart">\n' +
            '                                        </a>\n' +
            '                                        <a>\n' +
            '                                            <i class="'+isFavorite+' fa-heart shoptizer-color" data-id="'+data[i]["id"]+'"></i>\n' +
            '                                        </a>\n' +
            '                                    </span>\n' +
            '                                    <span class="view-icon" data-id='+ data[i]["id"]+'>\n' +
            '                                            <img src="{{ asset("site_assets/img/eye.png") }}">\n' +
            '                                    </span>\n' +discount+
            '                                <img class="img-fluid" src="'+image+'">\n' +
            '                                <a href='+url+' class="product-link"></a>'+
            '                            </div>\n' +
            '                            <div class="col-sm-12">\n' +
            '                                <span>'+data[i]['name']+' </span>\n' +
            '                                <h6 class="shoptizer-color price">'+data[i]['price']+' EGP</h6>\n' +
            '                            </div>\n' +
            '                            <div class="col-xs-12 p-rate">\n' +stars+'</div>\n' +
            '                        </div>';
        $(id).append(product);
    }
}

所以当我到达最后时它工作正常，但是在测试客户端上下滚动时，所以我在两行中得到了重复的产品。这是为什么？我该如何预防？

我认为问题出在$(window).scroll()!!

Answer 1

问题出在我的ajax调用中，我在成功函数上更新页面，因此如果用户在请求响应之前两次到达底部，它会复制打印的数据，因为它发送相同的页面，因此相同的响应。

所以我的解决方案是更新页面

$(window).scroll(function() {
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
        var _token = '{{ csrf_token() }}';
        var theurl = 'homePaginate';
        $.ajax({
            type: 'post',
            url: theurl,

            data:{_token:_token,page:page,avoid:skip_arr},
            dataType: 'json',
            success: function (data) {         
                printProducts(data,false,true,true)
            }
        });
      page+=1;
    }
});