Question

我有这个代码，它工作正常，问题是它一遍又一遍地加载内容，这是我想要的但同时我没有。我希望每次滚动到底部都会加载新页面。基本上我正在尝试为我的会员列表创建一个Forever Scroll。除了整数之外，网址是相同的，它们被分成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

在AJAX请求引入内容之前，window.onscroll处理程序将多次触发，这意味着您将触发多个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;

修改

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

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响应中的success参数。请注意，我已将$.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');

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

1 个答案: