我的网站上有一个显示销售列表的页面,用户可以按原样向下滚动,也可以应用过滤器。如果用户选择不应用任何过滤器并按原样向下滚动,它就可以完美运行。当他们选择应用过滤器时,我会更新无限滚动实例的参数,以便加载更多过滤后的结果。然后,当他们第一次滚动时,插件尝试一次加载 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"]
据我所知,插件中的滚动函数似乎调用了一次检索,但检索调用了两次 beginAjax。有谁知道这里会发生什么?