0

私はこのコードを持っています、そしてそれはうまくいきます、問題はそれがコンテンツを何度も何度もロードし続けることです、そうです私は欲しいですが同時に私はしません。一番下までスクロールするたびに、新しいページが読み込まれます。基本的に、メンバーリストの永遠の巻物を作成しようとしています。URLは、28s0-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人以上のメンバーがいて、1日で200人以上のメンバーになるとどうなりますか？次に、私が今まで行ったことのない数式を実行しますか？説明させてください...

数がすでに過ぎている場合+28;

はい、私はこれについて言う方法がわからないので、それが間違っていることを知っています。基本的に私が本当に必要としているのは、URLがすでに渡されている場合は、それに28を追加し、ページを下にスクロールしたら次のURLを渡すことです。

4

1 に答える 1

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');
于 2013-03-08T18:48:27.767 に答える