0

我有这段代码，它工作正常，问题是它会一遍又一遍地加载内容，这是我想要的，但同时我不想要。我希望每次滚动到底部时都会加载一个新页面。基本上，我正在尝试为我的成员列表创建一个 Forever Scroll。url 是相同的，除了一个整数被 28 分割 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 多个成员怎么办？然后我会反过来做一个我从未做过的数学方程式，所以让我解释一下......

如果 number 已经通过 + 28；

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

4

1 回答 1

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;

编辑

要在 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');
于 2013-03-08T18:48:27.767 回答