Paul Irish Infinite Scroll一次載入2頁

Question

我的網站上有一個頁面顯示銷售清單，用戶可以按原樣向下滾動或應用過濾器。 如果用戶選擇不應用任何過濾器並按原樣向下滾動，則效果很好。 當他們選擇應用過濾器時，我將更新無限滾動實例的參數，以使其加載更多的過濾結果。 然后，他們第一次滾動時，該插件會嘗試一次加載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' ] }); 

調用此方法后，一旦用戶嘗試滾動，接下來的兩個頁面就會嘗試同時加載並使插件崩潰。 我輸入了一些日志語句來嘗試說明發生了什么。 這是控制台日志：

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"]      

據我所知，看起來插件調用中的滾動功能只檢索一次，但是兩次檢索beginAjax兩次。 有誰知道這里會發生什么？

Answer 1

該問題不是由插件本身引起的。 定義opts.loading.start函數后，它將通過jQuery函數調用顯示正在加載的微調器，然后附加一個回調函數，該函數調用beginAjax函數以檢索下一頁結果。 我對此做了一些修改，以：

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

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

當我抓取下一頁結果時，也正在抓取它的加載器，就發生了這種情況。 我不知道這是可能的，但是$('#loader')既匹配原始加載程序，又匹配檢索到的頁面中的加載程序，因此回調函數被執行了兩次，每個加載程序一次。 我在選擇器中添加了:first ，現在可以正常使用了。

我發現此問題的方法是，用console.log語句替代檢索函數，然后以相同的方式記錄滾動函數，以發現這兩個函數僅被調用一次。 從那里可以很容易地確定它是兩次調用了beginAjax函數，並且快速瀏覽一下jQuery文檔就可以解釋為什么。 希望現在這個答案不會對其他所有人完全沒有用。