1

ユーザーが一番下に近いかどうかを確認することで、AJAXとJQueryを使用して動的に投稿をフェッチしようとしています。サーバーサイドはGAEのPythonです。

巻物を聞く：

this.config.window.on('scroll',this.loadContent);

1.下からの距離を確認する

2.次の10を取得するために、現在の投稿の数を含むajaxリクエストを送信します

3.results.check = trueは、サーバーに送信する投稿がこれ以上ないことを意味します。 

    loadContent: function(){
        // 1
        if($(document).height() - $(window).height() - $(window).scrollTop() < 1000) {
            var posts = $('.troll').children('div').length;
            data = 'loadmore=True&offset=' + posts;   //2
            $.ajax({               
                url: '/',
                type: 'POST', 
                data: data,
                dataType: 'json',
                success: function(results){
                    if (results.check === 'true'){  //3 
                        $(window).unbind('scroll');
                        return;
                    }
                    Post.insert10Values(results);
                }
            });
        };
    },

    insert10Values: function(results){
        var update = Handlebars.compile($('#troll10').html()),
            troll10update = update(results);

        $('div.troll').append( troll10update );
    }

ここでの問題は、高速でスクロールすると、2つ以上のリクエストがサーバーに送信され、重複したエントリを取得することです。クライアント側でレート制限したい。

4

3 に答える 3

2

問題の一部は、スクロールイベントが1秒間に何度もトリガーされることです

次のようなことを行う関数呼び出しを調整できます。

var scrollTimer=false;
var delay=500; /* 1/2 second*/
$(window).on('scroll',function(){
   if( scrollTimer){
       clearTimeout( scrollTimer);
   }

   scrollTimer=setTimeout(function(){           
       /* run your code here*/
   }, delay);

});

ajaxについては、最後のajax呼び出しの時間を保存し、新しいajax呼び出しを行う前の現在の時間と保存された時間に基づいて最小の差を設定できます。

var lastAJAX=Date.now(), AJAXMin=5000;/* 5 seconds*/

function checkAJAXCalls(){
    var now=Date.now(), diff=now-lastAJAX; 
    if( diff >= AJAXMin){
        lastAJAX=now;
         return true;
    }else{
        return false;
    }
}

次にif(checkAJAXCalls())、リクエストを行う前に実行します。lastAJAXコンセプトを変更して、コールバックの成功を更新することもでき$.ajaxます

于 2012-12-23T20:32:15.773 に答える
2

フラグloading=falseを設定します。リクエストを送信する前に、フラグを確認してください。falseの場合は、フラグをtrueに設定して要求を続行します。それ以外の場合は、イベントを無視します。結果が到着したら、それらを表示し、フラグをfalseに戻します。

于 2012-12-23T20:33:38.707 に答える
1

jQuery.ajaxと呼ばれるメソッドがありbeforeSendます。ajax呼び出しの直前に実行されます。これを使用して、他のリクエストが進行中であるかどうかを確認し、リクエストがある場合は通話をキャンセルできます。関数でfalseを返すbeforeSendと、ajax呼び出しは発生しないため、重複するコンテンツはありません。

$.ajax({               
    url: '/',
    type: 'POST', 
    data: data,
    dataType: 'json',
    beforeSend: function() {
        if (window.nextPageProcess) {
          return false;
        } else {
          window.nextPageProcess = 1;
        }
    },
    success: function(results){
        if (results.check === 'true'){  //3 
            $(window).unbind('scroll');
            return;
        }
        Post.insert10Values(results);
          window.nextPageProcess = 1;
    }
});
于 2012-12-23T20:31:58.313 に答える