InfiniteScroll + isotope : loadNextPage until item count greater than 3

I am trying to do a while loop on the click of the isotope filter button, everything works fine until I put my two functions : loadNextPage and count items in a while loop, the browser is stuck in an infinite loop, even though the cnt variable should be updated every time the loop runs. I want the two functions to run until the cnt variable reaches 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;
        });
     }
  });

The whole isotope + infiniteScroll code is wrapped inside a

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

I'm guessing this may have something to do with the issue, and until i wrapp my two functions in the while loop, everything works as intended.



Read more here: https://stackoverflow.com/questions/64397309/infinitescroll-isotope-loadnextpage-until-item-count-greater-than-3

Content Attribution

This content was originally published by Xavier C. at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: