永远滚动使用数组动态加载内容

Question

我有这段代码，它工作正常，问题是它会一遍又一遍地加载内容，这是我想要的，但同时我不想要。我希望每次滚动到底部时都会加载一个新页面。基本上，我正在尝试为我的成员列表创建一个 Forever Scroll。 url 是相同的，除了一个整数被 28s 0-28-56-84 分割，依此类推。 代码是

 function yHandler () {
   var wrap = document.getElementById('members_wrapper');
   var contentHeight = wrap.offsetHeight;
   var yOffset = window.pageYOffset;
   var y = yOffset + window.innerHeight;
 if (y >= contentHeight) {
    $.get('/memberlist?mode=lastvisit&order=DESC&start=28&username',function(data) {
     var elems= $(data);
      $('#members_wrapper').append(elems.find('#members_wrapper'));
   },'html');

  }
}

window.onscroll = yHandler;

说实话，我不太确定该怎么做……我确信我可以做到以下几点，

var number = ["28","56","84"];
   for (var i = 0; i>number.length; i++) {
      var url = '/memberlist?mode=lastvisit&order=DESC&start='+ number[i] +'&username'
 }

然后我可以像这样发帖$.get(url, function(data) {

如果这行得通，请告诉我，因为下一个问题是，如果我有超过 84 个成员并且一天增加到 200 多个成员怎么办？然后我会反过来做一个我从未做过的数学方程式，所以让我解释一下......

如果数字已经过了 + 28;

是的，我知道这是不正确的，因为我不知道该怎么做。基本上我真正需要的是，如果 url 已经通过添加 28 ，然后在页面向下滚动时传递下一个 url。

Answer 1

window.onscroll 处理程序将在 AJAX 请求拉入内容之前触发多次，这意味着您将触发多个 AJAX 请求。

跟踪您何时请求成员列表，如果 AJAX 请求仍在处理中，则不要运行 onscroll 处理程序。

var fetchingContent = false; // tracks if an AJAX request is active

function yHandler () {
   var wrap = document.getElementById('members_wrapper');
   var contentHeight = wrap.offsetHeight;
   var yOffset = window.pageYOffset;
   var y = yOffset + window.innerHeight;

   if (y >= contentHeight && !fetchingContent) {
       // set to TRUE before AJAX request
       fetchingContent = true; 
       $.get('/memberlist?mode=lastvisit&order=DESC&start=28&username',function(data) {
           var elems= $(data);
           $('#members_wrapper').append(elems.find('#members_wrapper'));
           // set to FALSE after AJAX request complete
           fetchingContent = false; 
        },'html');
   }
}

window.onscroll = yHandler;

编辑

要在 url 中加载适当的起始值，您需要保留对它的引用。

var start = 0, limit = 28;

// once the AJAX request has finished you can update the start value
// notice the start variable is dynamically added to the AJAX url
$.get('/memberlist?mode=lastvisit&order=DESC&start='+start+'&username',function(data) {
    var elems= $(data);
    $('#members_wrapper').append(elems.find('#members_wrapper'));
    // set to FALSE after AJAX request complete
    fetchingContent = false; 
    // add to the start value for the next AJAX request
    start = start + limit;
},'html');

做这个客户端的问题是你不知道什么时候达到了用户总数。因此，您需要检查是否有错误响应。

服务器端

$response = array();
if (no members found with given start value) {
    $response['success'] = 0;
} else {
    $html = {get members and build div}
    $response['success'] = 1;
    $response['html'] = $html;
}

// send JSON back to the client
echo json_encode($response);

现在您需要检查 AJAX 响应中的成功参数。请注意，我将 $.get datatype 更改为 json。您也可以改用$.getJSON。

$.get('/memberlist?mode=lastvisit&order=DESC&start='+start+'&username',function(response) {
    if (response.success === 1) {
        var elems= $(response.html);
        $('#members_wrapper').append(elems.find('#members_wrapper'));
        // set to FALSE after AJAX request complete
        fetchingContent = false; 
        // add to the start value for the next AJAX request
        start = start + limit;
    }
},'json');