javascript - Codeigniter Ajax无限滚动，带有过滤器重复数据

Question

我想使用带有过滤器的无限滚动来创建分页页面。我正在使用代码点火器。分页工作正常。当单击检查框时，它可以工作，但在滚动时，它会复制数据。我挣扎了好几天。如果您能帮助我，我将非常感激。谢谢。

这是我的查看代码

 $(document).ready(function() {
    load_content();
    function load_content(){
            var total_record = 0;
            var total_groups = <?php echo $total_data; ?>;  
        //brand is the checkbox value
            var brand=check_box_values('brand');
            $('#results').load("<?php echo base_url() ?>content/load_more",
             {'group_no':total_record,'brand':brand}, function() {total_record++;});        
     }
        //For passing checkbox values
             function check_box_values(check_box_class){
                        var values = new Array();
                            $("."+check_box_class).each(function() {
                              if($(this).is(':checked')){
                               values.push($(this).val());
                                }
                            });
                        return values;
                    }
        $(".brand").click(function(){
          load_content();
       });

$(window).scroll(function() {       
                if($(window).scrollTop()+$(window).height() >= $('#fooerdivid').offset().top)  
                {           
                   var total_record = 0;
            var total_groups = <?php echo $total_data; ?>;  
        //brand is the checkbox value
            var brand=check_box_values('brand');

                    if(total_record <= total_groups)
                    {
                      loading = true; 
                      $('.loader_image').show(); 
                      $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record,'brand':brand},
                        function(data){ 
                            if (data != "") {                               
                                $("#results").append(data);                 
                                $('.loader_image').hide();                  
                                total_record++;
                            }
                        });     
                    }
                }
            });
    });

Answer 1

当我试图实现同样的目标时，我遇到了同样的问题。问题是 window.scroll 使用相同的参数多次触发 AJAX 请求，并导致数据重复。为了解决这个问题，您可以使用标志来检查请求是否正在运行。试试这个脚本。

$(document).ready(function(){
   var flag = true; //set initial value true for first request
    $(window).scroll(function() {       
                    if($(window).scrollTop()+$(window).height() >= $('#fooerdivid').offset().top)  
                    {          
                       if(flag) //run script if flag is true
                       {
                       flag = false; //script is running
                       var total_record = 0;
                var total_groups = <?php echo $total_data; ?>;  
            //brand is the checkbox value
                var brand=check_box_values('brand');

                        if(total_record <= total_groups)
                        {
                          loading = true; 
                          $('.loader_image').show(); 
                          $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record,'brand':brand},
                            function(data){ 
                                if (data != "") {                               
                                    $("#results").append(data);                 
                                    $('.loader_image').hide();                  
                                    total_record++;
                                    flag = true; //Script execution completed and next request can be execute
                                }
                            });     
                        }
                      }
                    }
                });
        });
        });

希望这能解决您的问题。

更新

$(document).ready(function(){
   var flag = true; //set initial value true for first request
   var is_pending = false; //no request is pending

   load_content();
    function load_content(){
           if(flag) //run script if flag is true
                       {
             flag = false; //script is running
            var total_record = 0;
            var total_groups = <?php echo $total_data; ?>;  
        //brand is the checkbox value
            var brand=check_box_values('brand');
            $('#results').load("<?php echo base_url() ?>content/load_more",
             {'group_no':total_record,'brand':brand}, function() {
                  total_record++; 
                  flag = true; 
                  if(is_pending)
                  {  is_pending = false;load_content(); } 
                  });   
           }     
     }
        //For passing checkbox values
             function check_box_values(check_box_class){
                        var values = new Array();
                            $("."+check_box_class).each(function() {
                              if($(this).is(':checked')){
                               values.push($(this).val());
                                }
                            });
                        return values;
                    }
        $(".brand").click(function(){
         if(flag){
          load_content();
         }else{
          is_pending = true;//request is pending
          }
       });

    $(window).scroll(function() {       
                    if($(window).scrollTop()+$(window).height() >= $('#fooerdivid').offset().top)  
                    {          
                       if(flag) //run script if flag is true
                       {
                       flag = false; //script is running
                       var total_record = 0;
                var total_groups = <?php echo $total_data; ?>;  
            //brand is the checkbox value
                var brand=check_box_values('brand');

                        if(total_record <= total_groups)
                        {
                          loading = true; 
                          $('.loader_image').show(); 
                          $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record,'brand':brand},
                            function(data){ 
                                if (data != "") {                               
                                    $("#results").append(data);                 
                                    $('.loader_image').hide();                  
                                    total_record++;
                                    flag = true; //Script execution completed and next request can be execute
                                }
                            });     
                        }
                      }
                    }
                });
        });
        });