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调用中，我发送page号，有时我需要避免某些产品显示

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;
    }
});

jQuery滚动操作重复了结果

1 个答案: