InfiniteScroll + isotope : loadNextPage 直到项目数大于 3答案

【问题标题】：InfiniteScroll + isotope : loadNextPage until item count greater than 3InfiniteScroll + isotope : loadNextPage 直到项目数大于 3
【发布时间】：2021-01-31 10:58:04
【问题描述】：

我试图在单击同位素过滤器按钮时执行一个while循环，一切正常，直到我把我的两个函数：loadNextPage和count items in a 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 循环中，一切都按预期工作。

【问题讨论】：

标签： javascript jquery wordpress infinite-scroll jquery-isotope

【解决方案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();

 });
});

【讨论】：