0

一種の無限スクロール UI を作成するために使用される次の JavaScript コードがあります。問題は、マウス ホイールでスクロールすると、複数のリクエストが生成されることです。

サンプルはこちら

var canLoad = true;

$(window).scroll(function()
{ 
    if($(window).scrollTop() == $(document).height() - $(window).height() && canLoad)
    {
    canLoad = false;
            $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "/loadmore.html",
        success: function(html)
        {
            if(html)
            {
            var $html = $(html);
            $html.imagesLoaded(function() {
                $('div#loadmoreajaxloader').hide();
                $("#container").masonry('appended', $html, true);
            }).appendTo($("#container"));
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more backgrounds to show.</center>');
            }
        }
        });
        canLoad = true;
    }
});
4

2 に答える 2

2

最良のオプションは、scroll関数内でタイマーを使用し、各リクエストの前にキャンセルすることです。

var timer;

$(window).scroll(function()
{
    timer && clearTimeout(timer);

    timer = setTimeout(function()
    {
        // Run whatever code you want here...
    }, 300);
});

これがフィドルです：http://jsfiddle.net/FcxSL/

于 2012-08-20T00:44:48.603 に答える
0

私はあなたの質問を間違って読みました、

あなたがしなければならないことはここにあります。コンテンツを ajax するときは、ajax された div に id を与えるようにしてください。次に、ifステートメントを入れます

その要素が存在するかどうかを確認して、存在する場合は投稿リクエストを再度実行しません。dom にない場合はリクエストを実行します。

于 2012-08-20T00:49:55.817 に答える