保罗爱尔兰无限滚动一次加载 2 页

Paul Irish Infinite Scroll loading 2 pages at once

本文关键字：一次 加载 爱尔兰 无限 滚动 保罗      更新时间：2023-09-26

我的网站上有一个显示销售列表的页面，用户可以按原样向下滚动，也可以应用过滤器。如果用户选择不应用任何过滤器，而只是按原样向下滚动，它就可以完美运行。当他们选择应用筛选器时，我会更新无限滚动实例的参数，以便它加载更多筛选结果。然后，当他们第一次滚动时，插件会尝试一次加载 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);
}

这是更新无限滚动的代码：

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

据我所知，看起来插件调用中的滚动函数检索一次，但检索调用开始 Ajax 两次。有谁知道这里会发生什么？

该问题不是由插件本身引起的。定义 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文档解释了原因。希望现在这个答案不会对其他人完全没用。

相关文章：