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

Question

我试图在单击同位素过滤器按钮时执行 while 循环，一切正常，直到我将我的两个函数：loadNextPage 和 count items 放入 while 循环中，浏览器陷入无限循环，即使每次循环运行s 时都应该更新 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 循环，我使用了一个 self-call 函数循环并等待正确的回调，这里是完整的代码以防你偶然发现这个 post 并正在寻找完整的解决方案

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

 });
});

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

InfiniteScroll + isotope : loadNextPage until item count greater than 3

javascript

wordpress

jquery

infinite-scroll

jquery-isotope