Codeigniter 无限滚动奇怪的结果

Question

我尝试在我的项目中实现无限滚动。我第一次在一个新项目上尝试它并且效果很好，但是当我尝试在我的另一个项目中实现它时，我得到了奇怪的结果。

为了测试它，我将限制设置为 1，所以现在应该每次都添加 1 项，但事实并非如此。它总是使物品数量翻倍并给出奇怪的顺序。所以我添加了一个带有项目计数/偏移量的回声，我得到了这样的东西。 （数字是回声偏移，每行是一个滚动，应该只添加一项）：

第一个：1（= 1 项）

第二个：1 - 2 - 2（= 3 项）

第三：1 - 2 - 4 - 4 - 2 - 4 - 4（= 7 项）

第四：1 - 2 - 4 - 8 - 8 - 4 - 8 - 8 - 2 - 4 - 8 - 8 - 4 - 8 - 8（= 15 项）

等等...而且，相同的数字总是相同的项目。所以我得到了很多双重物品。我也尝试过 alert(count($items));在 foreach 结果只给出 1 之前。

这是Ajax的代码：

var reachedEnd = false;
$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {

        setTimeout(function() {
            lastPostFunc();
        }, 1000);
    }
});

function lastPostFunc() {
    var trs = $('.sresult-row'); 
    var count = trs.length; //offset

    if (reachedEnd == false) {
        alert("test"); //I only get 1 alert after each scroll 
            $.ajax({
                url: "http://localhost/ci/index.php/search/ajax_searchJob/" + count,
                async: false,
                dataType: "html",
                success: function(data) {
                    if (data != "End")
                        $('.result-bd').append(data);
                    else
                        reachedEnd = true;
                }
            });
    }
}

只是我控制器的一小部分：

public function ajax_searchJob($offset = null) {
    if ($this->job_model->searchJobUnique($where, 1, $offset)) {
        $jobs = $this->job_model->searchJobUnique($where, 1, $offset);
        echo $offset; //This gives the result I've said before 
        ...
        $this->load->view("default/search-job-result-ajax", $data);
    } else {
        echo 'End';
    }
}

我的模型以防有人想看：

public function searchJobUnique($where, $limit = 1, $offset = 0)
{
      $sql = "SELECT *,job.id as id, job.country as country, job.province as province, job.city as city,
            job.employment_length as employment_length, job.employment_type employment_type,
            u.username as company_name, job.company_id as company_id, u.description as description,
            job.is_visa_assistance, job.is_visa_assistance,
            ms.employment_type as msjob_employment_type,
            ms.employment_length as msjob_employment_length,
            ms.is_visa_assistance as msjob_is_visa_assistance,
            ms.is_housing_assistance as msjob_is_housing_assistance,
            ms.language_level as msjob_language_level,
            ms.industry_position as msjob_industry_position
                      FROM job
                      LEFT JOIN user as u on job.company_id=u.uid
                      LEFT JOIN job_industry_position as jip on job.id=jip.job_id
                      LEFT JOIN match_score as ms on job.id=ms.job_id".$where."  ORDER BY job.post_date DESC 
                      limit " . $limit . " offset " . $offset;
      $r = $this->db->query($sql);

      if ($r->num_rows > 0) {
        return $r->result_array();
    } else {
        return false;
    }
  }  

我真的很想解决这个问题。我使用了在我的测试项目中使用的相同代码，它可以完美运行。

有人吗？

Answer 1

查看您的 JS，我认为 $('.result-bd') 是您的 $('.sresult-row') 的占位符，您无法准确获取行数的可能性是因为附加的项目尚未加载到 DOM ，因此，您的 ajax req 向您的控制器提交了不正确的值，我建议您在继续为您的 count 分配任何值之前确保已加载 $('.sresult-row')，即在您的代码中您可以尝试：

var reachedEnd = false;
var count = 1; //give your offset a default value first
$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {

            $.when(lastPostFunc()).then(function(){ //make sure that the result items gets appended
               var trs = $('.sresult-row'); //assigning new instances of sr-row everytime 
               setTimeout(function() { //provide a short lag time just to make sure that .result-row is already existing in the dom 
                  count = parseInt(trs.length, 10); //assigns a new value for your offset
               }, 500);
            });

    }
});

function lastPostFunc() {
    if (reachedEnd == false) {
            $.ajax({
                url: "http://localhost/ci/index.php/search/ajax_searchJob/" + count,
                async: false,
                dataType: "html",
                success: function(data) {
                    if (data != "End")
                        $('.result-bd').append(data);
                    else
                        reachedEnd = true;
                }
            });
    }
}

没试过，希望对你有帮助，干杯！