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

我试着在点击同位素过滤器按钮时做一个while循环，一切正常，直到我将我的两个功能：loadNextPage和count items放入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;
        });
     }
  });

---

我猜这可能与问题有关，在我将两个函数包装到while循环中之前，一切都按预期进行。

我找到了一种更好的方法，我使用了自调用函数循环并等待正确的回调，而不是使用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();

 });
});

jQuery（文档）.ready（函数（$）{
$（'.grid'）.imagesLoaded（函数（）{
var$grid=$（'.actus grid'）；
$grid.com({
itemSelector:“.actus网格项”，
位置：正确，
砌体：{
columnWidth:“.actus网格项”，
}
});
var iso=$grid.data（'同位素'）；
$grid.InfinitiesCarl({
路径：'.nav previous>a'，
附加：'.actus网格项'，
外地人：iso
});
//点击按钮过滤项目
$（'.filter button group'）。在（'单击'，'按钮'，函数（）上{
var filterValue=$（this.attr（'data-filter'）；
$grid.同位素（{filter:filterValue}）；
//如果筛选项目计数低于每页发布设置，则加载下一页
loadMoreLoop（）；
函数loadMoreLoop（）{
loadPageIso（）；
countIsoItems（）；
//等待正确的回调
$grid.on（'append.infiniteScroll'，function（）{
如果（cnt<3）loadMoreLoop（）；
});
}
//加载下一页
函数loadPageIso（）{
$grid.infiniteScroll（'loadNextPage'）；
//减少项目的z索引属性，以防止同位素过滤时重叠
$（'.actus网格项'）。每个（函数（i）{
$（this.css（'z-index'，999-i）；
});
}
//计算网格中可见的项目数
函数countIsoItems（）{
cnt=iso.filteredItems.length；
}
});
函数updateFilterCount（）{
cnt=iso.filteredItems.length；
}
updateFilterCount（）；
});
});

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

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();

 });
});

jQuery（文档）.ready（函数（$）{
$（'.grid'）.imagesLoaded（函数（）{
var$grid=$（'.actus grid'）；
$grid.com({
itemSelector:“.actus网格项”，
位置：正确，
砌体：{
columnWidth:“.actus网格项”，
}
});
var iso=$grid.data（'同位素'）；
$grid.InfinitiesCarl({
路径：'.nav previous>a'，
附加：'.actus网格项'，
外地人：iso
});
//点击按钮过滤项目
$（'.filter button group'）。在（'单击'，'按钮'，函数（）上{
var filterValue=$（this.attr（'data-filter'）；
$grid.同位素（{filter:filterValue}）；
//如果筛选项目计数低于每页发布设置，则加载下一页
loadMoreLoop（）；
函数loadMoreLoop（）{
loadPageIso（）；
countIsoItems（）；
//等待正确的回调
$grid.on（'append.infiniteScroll'，function（）{
如果（cnt<3）loadMoreLoop（）；
});
}
//加载下一页
函数loadPageIso（）{
$grid.infiniteScroll（'loadNextPage'）；
//减少项目的z索引属性，以防止同位素过滤时重叠
$（'.actus网格项'）。每个（函数（i）{
$（this.css（'z-index'，999-i）；
});
}
//计算网格中可见的项目数
函数countIsoItems（）{
cnt=iso.filteredItems.length；
}
});
函数updateFilterCount（）{
cnt=iso.filteredItems.length；
}
updateFilterCount（）；
});
});