Paul Irish Infinite Scroll загружает сразу 2 страницы

Question

Paul Irish Infinite Scroll загружает сразу 2 страницы

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' ] });

После того, как это вызвано, как только пользователь попытается прокрутить, следующие две страницы попытаются загрузить одновременно и сбой плагина. Я поставил несколько операторов журналов, чтобы попытаться рассказать, что происходит. Вот консольный журнал:

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. Кто-нибудь знает, что здесь может быть?

jaimerump 23 сен. 2013, в 19:34

Источник

Теги:

javascript

jquery

infinite-scroll

1 ответ

Ещё вопросы

jaimerump · Accepted Answer · 2013-09-24T12-58-00.000Z

Проблема не была вызвана самим плагином. Когда функция opts.loading.start определена, она показывает ваш счетчик загрузки с помощью вызова функции jQuery, а затем beginAjax функцию обратного вызова, которая вызывает функцию beginAjax для получения следующей страницы результатов. Я немного изменил это, чтобы:

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

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

И так получилось, когда я схватил следующую страницу результатов, я тоже хватал ее загрузчика. Я не знал, что это возможно, но $('#loader') сопоставлял как оригинальный загрузчик, так и тот, который был получен из загруженной страницы, поэтому обратный вызов выполнялся дважды, один раз для каждого загрузчика. Я добавил :first к селектору, и теперь он отлично работает.

То, как я это понял, - это прореживание функции retrieve с помощью операторов console.log, а затем запись функции прокрутки таким же образом, чтобы узнать, что оба они вызываются только один раз. Оттуда было относительно просто выяснить, что это была функция beginAjax, вызываемая дважды, и быстрый взгляд на документацию jQuery объяснил, почему. Надеюсь, теперь этот ответ не будет абсолютно бесполезен для всех остальных.