javascript - 将ajax添加到无限滚动

Question

我刚刚通过创建以下函数创建了一种在我的网站上运行无限滚动的方法:

window.onscroll = yHandler;
function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
 if(y >= contentHeight){
   wrap.innerHTML += '<div class="newData"></div>';
 }
}

它会在用户向下滚动页面时创建一个简单的 div。我在这里在我的 html 中调用它:

<div id="wrap">

        <img src="NYC.jpg">

</div>

我只有一张更大的图片占用了我页面上的空间用于测试。

我想使用 ajax 从 mysql 添加信息，但在这样做时遇到了问题。我使用以下 Ajax 与我的数据库进行交互:

$.ajax({
      url: "scroll.php",
      data: "";
      dataType: 'json',
      success: function(result){
        //get the variables here.
      }
  });

我的问题是，我不明白如何相互调用函数和 Ajax 以使其全部正常工作。我尝试将 Ajax 放入函数中，但这似乎没有做任何事情。当需要创建新的 div 时，如何同时调用我创建的函数和 Ajax？

我的 PHP 是:

$return_arr = array();
$fetch = mysqli_query("SELECT User_Id, First_Name, Last_Name FROM Users"); 

while ($row = mysqli_fetch_array($fetch, MYSQLI_ASSOC)) {
    $row_array['User_Id'] = $row['User_Id'];
    $row_array['First_Name'] = $row['First_Name'];
    $row_array['Last_Name'] = $row['Last_Name'];
    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

Answer 1

我相信让您的代码正常工作的最简单方法是像这样修改您的 if 语句:

if(y >= contentHeight){
  $.ajax('scroll.php').done(function(data) {
    // variables: data['variable_name']
    // or if returning HTML:
    wrap.innerHTML += '<div class="newData">' + data + '</div>';
  })
}

但是，考虑到一旦您滚动到网站内容之外，您将针对每个滚动事件向 scroll.php 发送请求 - 这可能会淹没服务器，因此我建议将调用包装在去抖动函数中.去抖函数基本上可以让您在给定的时间间隔内调用一次函数。如果您不想编写自己的去抖功能，我建议使用下划线库:http://underscorejs.org .代码将如下所示:

if(y >= contentHeight){
  _.debounce(
    $.ajax('scroll.php').done(function(data) {
      wrap.innerHTML += '<div class="newData">' + data + '</div>';
    }
  ), 1000) // Only fetch once every second
}