php - 滚动时对数据库的双重请求

Question

这是滚动时调用请求的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; 
    })


});

这是 Controller 方法:

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 个相同记录的双重请求？当我向下滚动时

2) 我怎样才能使每滚动 100 像素追加记录，但问题是很难使 currentScrollTol % 100 == 0，我怎样才能将其更改为正常？

Answer 1

这个呢？

   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 值存储在更高的范围(有点像 bool 值)并使用它来确保您不会再次加载相同的东西......这两种方法都有其缺陷，但它可能适合您的需求。

-m1