无限滚动+同位素:加载下一页，直到项目计数大于3

Question

我试图在点击同位素过滤器按钮时执行while循环，一切都很好，直到我将loadNextPage和count项这两个函数放入while循环中，浏览器仍处于无限循环中，尽管每次循环运行时都应更新cnt变量。我希望这两个函数一直运行到cnt变量达到4

$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({filter: filterValue});
cnt = 0;

while ( cnt < 4 ) {
loadPageIso();
countIsoItems();
}
function loadPageIso() {
$grid.infiniteScroll('loadNextPage');
}
function countIsoItems() {
$grid.on( 'append.infiniteScroll', function() {
cnt =  iso.filteredItems.length;
});
}
});

整个同位素+infiniteScroll代码被包裹在中

jQuery( document ).ready( function( $ ) {
//code is here
});

我猜这可能与这个问题有关，在我将我的两个函数封装在while循环中之前，一切都能正常工作。

Answer 1

我找到了一个更好的方法，而不是使用while循环，我使用了一个自调用函数循环并等待正确的回调，以下是完整的代码，以防你偶然发现这篇文章并正在搜索完整的解决方案

jQuery( document ).ready( function( $ ) {
$('.grid').imagesLoaded(function () {
var $grid = $('.actus-grid');
$grid.isotope({
itemSelector: '.actus-grid-item',
percentPosition: true,
masonry: {
columnWidth: '.actus-grid-item',
}
});
var iso = $grid.data('isotope');
$grid.infiniteScroll({
path: '.nav-previous > a',
append: '.actus-grid-item',
outlayer: iso
});
// filter items on button click
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({filter: filterValue});
//load next page if filtered items count is inferior to post per page setting
loadMoreLoop();
function loadMoreLoop() {
loadPageIso(); 
countIsoItems();
//wait for right callback
$grid.on( 'append.infiniteScroll', function() {
if (cnt < 3) loadMoreLoop();
});
}
//load next page
function loadPageIso() {
$grid.infiniteScroll('loadNextPage');
//decrement z-index property of items to prevent overlapping while isotope filtering
$('.actus-grid-item').each(function(i){
$(this).css('z-index', 999 - i);
});
}
// Count items visible in grid
function countIsoItems() {
cnt =  iso.filteredItems.length;
}
});
function updateFilterCount() {
cnt =  iso.filteredItems.length;
}
updateFilterCount();
});
});