0

サイトにセール リストを表示するページがあり、ユーザーはそのまま下にスクロールするか、フィルターを適用できます。ユーザーがフィルターを適用せず、そのまま下にスクロールすることを選択した場合、完全に機能します。フィルターの適用を選択したら、無限スクロール インスタンスのパラメーターを更新して、フィルター処理された結果をさらに読み込むようにします。次に、最初のスクロール時に、プラグインは一度に 2 つのページを読み込もうとし、クラッシュしてバインドを解除します。

最初に無限スクロールを適用するために使用している関数は次のとおりです。

function initInfiniteScroll( $container, flag ){

//Initialize the plugin
console.log('Initializing infinite scroll');
$container.infinitescroll({
    navSelector  : "#paginationControl",
    nextSelector : "#paginationControl a#next",
    itemSelector : "#json_pen",
    bufferPx : 200,
    animate : false,
    debug : true,
    loading : {
        img : "/includes/gif/loading.gif",
        finishedMsg : "No more stuff.",
        msgText : ""},
    errorCallback : function(){
        $("#loader.grid").fadeOut('normal');
    }
    },
    function( entry_json ){
    /* I'm loading a block of JSON to throw to Backbone instead of 
        grabbing html. */
        console.log( 'Adding more stuff' );

        //Parse the entries
        var entries = JSON.parse( $(entry_json).html() );

        //Throw them to the grid
        Grid.addPage( entries );

    });

//Mark it as having been applied
$container.addClass(flag);
}

Infinite Scroll を更新するコードは次のとおりです。

//Replace the pagination controls
$("#main #paginationControl").html( $("#listing_pen #paginationControl").html() );
var nextPage = $('#main #paginationControl #next').attr('href');
var basePath = nextPage.slice( 0, nextPage.length - 2 ); //Cut off the last character

//Overwrite path
$("#grid").infinitescroll({ state : { currPage : 1 }, 
                            path : [ basePath+'/', ' #json_pen' ] });

これが呼び出された後、ユーザーがスクロールしようとするとすぐに、次の 2 つのページが同時に読み込まれ、プラグインがクラッシュします。何が起こっているのかを伝えるために、いくつかのログ ステートメントを入力しました。コンソールログは次のとおりです。

loading /organize/10002/listings/all/10001/1001v/all/all/all 
Updating the page scheme 
initializing masonry 
["math:", 1274, 1635] 
in scroll calling the retrieve function 
defined begin ajax 
setting during ajax to true 
["heading into ajax", Array[2]]
retrieving /organize/10002/listings/all/10001/1001v/all/all/all/2 #json_pen
["Using HTML via .load() method"] 
["heading into ajax", Array[2]]
retrieving /organize/10002/listings/all/10001/1001v/all/all/all/3 #json_pen 
["Using HTML via .load() method"] 
["Error", "end"] 
["Binding", "unbind"]

私が知る限り、プラグイン呼び出しの scroll 関数は 1 回取得するように見えますが、beginAjax を 2 回呼び出します。ここで何が起こっているのか誰にも分かりませんか？

4

1 に答える 1

0

この問題は、プラグイン自体が原因ではありません。関数が定義されると、jQuery 関数呼び出しで読み込みスピナーが表示され、関数を呼び出して結果の次のページを取得するopts.loading.startコールバック関数がアタッチされます。beginAjaxこれを少し変更して、次のようにしました。

opts.loading.start = opts.loading.start || function() {

            $(opts.navSelector).hide();
            $('#loader').show(opts.loading.speed, function () {
                beginAjax(opts);
            });
        };

結果の次のページを取得しているときに、そのローダーも取得していました。これが可能だとは知りませんでしたが$('#loader')、元のローダーと取得したページのローダーの両方が一致していたため、ローダーごとに 1 回ずつ、コールバックが 2 回実行されました。:firstセレクターにa を追加したところ、完全に機能するようになりました。

私がこれを理解した方法は、console.log ステートメントを使用して取得関数をいじり、スクロール関数を同じ方法でログに記録して、両方が一度しか呼び出されていないことを確認することでした。そこから、beginAjax 関数が 2 回呼び出されたことが原因であることが比較的簡単にわかりました。jQuery のドキュメントをざっと見てみると、その理由が説明されていました。うまくいけば、この答えが他の人にとって完全に役に立たないわけではありません。

于 2013-09-24T14:56:56.080 に答える