Javascript 将ajax添加到无限滚动

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

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>';
 }
}

我的问题是，我不明白如何互相调用函数和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);

“result”变量实际上是来自sql数据库的响应，它是JSON（如注释中所述）。因为您没有给出php脚本（查看sql select语句），所以将sql列名称（属性）替换为“您的sql列名称”

var数组=[]；
$.ajax({
键入：“获取”，
url:“scrol.php”，
数据类型：“json”，
成功：函数（结果）//响应已经是JSON，不需要解析
{
警报（结果[0]。您的_sql_列_名称）；//测试目的
for（var i=0；i

我认为让代码工作的最简单方法是修改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>';
  })
}

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

如果（y>=contentHeight）{
$.ajax（'scroll.php'）.done（函数（数据）{
//变量：数据['variable_name']
//或者如果返回HTML：
wrap.innerHTML+=''+数据+''；
})
}

但是，考虑到一旦滚动到站点的内容之外，您将向每个滚动事件发送ScRel.PHP请求，这可能会淹没服务器，因此我建议在DeBung函数中包装调用。去盎司函数基本上允许您在给定的时间间隔内调用函数一次。如果您不想编写自己的debounce函数，我建议使用下划线库：。代码将如下所示：

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

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

如果（y>=contentHeight）{
_黛博斯先生(
$.ajax（'scroll.php'）.done（函数（数据）{
wrap.innerHTML+=''+数据+''；
}
)，1000）//每秒仅获取一次
}

您能创建一个JSFIDLE吗？像这样，有人可以采取一个清楚的看什么是问题？这让我得到新的div时，我滚动！但假设我从php文件中获得一个包含数据的数组。我如何将这些信息传递到div中？我在这里做了一个简单的示例片段：如果需要更多帮助，请回复！嘿，我把我的PHP添加到了问题中。当我尝试检索数组时，仍然没有任何结果。有什么建议吗？

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