滚动时对数据库进行双重请求

Double request on the database when scrolling

本文关键字：请求 数据库 滚动      更新时间：2023-09-26

这是滚动时调用请求的javascript

   $(document).ready(function(){
        var tempScrollTop, currentScrollTop = 0; 
        $(document).scroll(function(){ 
        currentScrollTop = $(document).scrollTop(); 
        var ids = new Array();
    if (tempScrollTop < currentScrollTop ) 
    {
        var result = currentScrollTop % 100;
        if(result == 0)
        {
            //console.log('scroll happened');
            var items = $(".item");
            var items_l = items.length;
            for(var i = 0; i < items_l; i++)
            {
                ids[i] = parseInt(items[i].id.replace(/'D+/g,""));
            }
            ids = ids.sort();
            var last_id = ids[0];
            $.ajax({
              url: "ajax/load",
              type: "POST",
              data: {last_id : last_id},
              success: function(res){
              $("#content").append(res);
              }
            });
        }
    }
    /*else if (tempScrollTop > currentScrollTop ) 
    {
        var result = currentScrollTop % 100;
        if(result == 0)
        {
            $("#content").text("Вверх запрос " + result);
        }
    }*/
    tempScrollTop = currentScrollTop; 
    })

});

这就是控制器的方法：

public function ajaxLoad()
{
    $last_id = intval($this->input->post("last_id"));
    //$last_id++;
    $db_data['query'] = $this->db->query("SELECT * FROM items WHERE id < ".$last_id." ORDER BY id DESC LIMIT 1");
    $data['content'] = $this->load->view('item', $db_data, true);
    echo $data['content'];
}

我有两个问题：

1） 我如何防止双重请求，有时会使两个相等的记录被输出？当我向下滚动时

2） 我如何使滚动记录的每100个像素都有附加，但问题是很难使currentScrollTol%100==0，我如何将其更改为正常？？

这个怎么样？

   var tempScrollTop, currentScrollTop = 0, isLoading = false; 
   $(document).scroll(function(){

[…狙击…]

     var last_id = ids[0];
     if ( !isLoading ) {
        isLoading = true;
        $.ajax({
          url: "ajax/load",
          type: "POST",
          data: {last_id : last_id},
          success: function(res){
          $("#content").append(res);
          isLoading = false;
          },
          error: function() { isLoading = false; }  // just in case
        });

[…等…]

当然，这只会让你一次加载一个东西，但至少不会锁定你的UI。

您也可以将last_id值存储在更高的范围内（有点像布尔值），并使用它来确保不会再次加载相同的东西。。。这两种方法都有缺点，但可能适合您的需要。

-m1

所以您有两个问题：

1） 你并不总是达到100%条件

2） 你有时不止一次达到100%条件

我建议：

    $(document).ready(function(){
        var tempScrollTop, currentScrollTop = 0; 
        var loaded = {};
        loaded[0] = true; //assuming the first piece comes loaded
        $(document).scroll(function(){ 
            currentScrollTop = $(document).scrollTop(); 
            var ids = new Array();  
            //this gives you a different int value for each 100 px section
            //at 67px, you get 0, at 345px you get 3, etc
            int section = Math.floor(currentScrollTop/100)
            if(!loaded[section]) {
                //prevents double request
                loaded[section] = true;
                var items = $(".item");
                var items_l = items.length;
                for(var i = 0; i < items_l; i++)
                {
                    ids[i] = parseInt(items[i].id.replace(/'D+/g,""));
                }
                ids = ids.sort();
                var last_id = ids[0];
                $.ajax({
                    url: "ajax/load",
                    type: "POST",
                    data: {last_id : last_id},
                    success: function(res){
                        $("#content").append(res);
                    }
                });
            }
        });
    });

我还要注意的是，如果你在向下滚动一点后重新加载，这些解决方案中的任何一个，包括原始解决方案，都会出现一些问题，因为浏览器会跳到你滚动到的点，而不会调用滚动事件来生成高于该点的页面。但这超出了问题的范围。

相关文章：