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

Posted 2023-05-07

【中文标题】InfiniteScroll + isotope : loadNextPage 直到项目数大于 3

【英文标题】：InfiniteScroll + isotope : loadNextPage until item count greater than 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 循环中，一切都按预期工作。

【参考方案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();

 );
);