jQuery、无限滚动、同位素循环函数并在外部变量更改时中断

一些示例js代码：

var $ = jQuery,
    $container = $('#gridcontainer');
    done_loading = false;

$container.infinitescroll({
    navSelector  : '#navi',
    nextSelector : '#navi a',
    itemSelector : '.grid-item',
    errorCallback : function () { 
        done_loading = true;
        console.log(done_loading);
    },
    // call Isotope as a callback
    function( newElements ) {
        $container.isotope( 'insert', $( newElements ) ); 
    }
);  

$('a.my_test_button').click(function(event){
    event.preventDefault();
    if ( $('#gridcontainer div.isotope-item:not(.isotope-hidden)').size() < 15 && done_loading == false ) {
        $container.infinitescroll('retrieve');
        console.log('loaded');
    }
}

var$=jQuery，
$container=$（“#gridcontainer”）；
完成加载=错误；
$container.infinites卷({
导航选择器：“#navi”，
下一个选择器：“#navi a”，
itemSelector:“.grid项”，
errorCallback:函数（）{
完成加载=真；
控制台日志（完成加载）；
},
//调用同位素作为回调
函数（新元素）{
$container.同位素（'insert'，$（新元素））；
}
);  
$（'a.my_测试按钮'）。单击（函数（事件）{
event.preventDefault（）；
if（$（'#gridcontainer div.isotox-item:not（.isotox hidden））.size（）<15&&done\u load==false）{
$container.infinitescroll（'retrieve'）；
console.log（'loaded'）；
}
}

这段代码使用同位素设置无限滚动，当用户滚动到底部时加载更多元素。现在，当使用同位素过滤器时，一些元素被隐藏，因此当我在某些页面加载更多元素时，可能没有过滤类型的元素。 这就是我的

a.my_test_按钮

应该发挥作用并加载更多项目，直到无限滚动

errorCallback

激发并将

done_loading

设置为true（所有页面都已加载，因此没有更多要加载的内容）或未隐藏元素的数量超过15

但是上面的代码只执行一次，我希望这部分循环，直到满足上述条件

如何将此代码更改为缩写以生成所描述的循环？

如果（$（'#gridcontainer div.isotox-item:not（.isotox hidden））.size（）<15&&done\u load==false）{
if ( $('#gridcontainer div.isotope-item:not(.isotope-hidden)').size() < 15 && done_loading == false ) {
    $container.infinitescroll('retrieve');
    console.log('loaded');
}

$container.infinitescroll（'retrieve'）；
console.log（'loaded'）；
}

改为

while ( $('#gridcontainer div.isotope-item:not(.isotope-hidden)').size() < 15 && done_loading == false ) {
    $container.infinitescroll('retrieve');
    console.log('loaded');
}

while（$（'#gridcontainer div.isotox-item:not（.isotox hidden））.size（）<15&&done\u load==false）{
$container.infinitescroll（'retrieve'）；
console.log（'loaded'）；
}

你可以试试这个

do{ 
   $container.infinitescroll('retrieve');
   console.log('loaded');
  }while( $('#gridcontainer div.isotope-item:not(.isotope-hidden)').size() < 15 && done_loading == true );

do{
$container.infinitescroll（'retrieve'）；
console.log（'loaded'）；
}while（$（'#gridcontainer div.isotox-item:not（.isotox hidden））.size（）<15&&done\u load==true）；

我认为infinitescroll会出现问题，需要一些时间来加载新项目，将其放入while循环可能会导致应用程序死机；）。我添加了一个代码，如果您看到的话，您会发现我使用了done_loading==true，以确保它使用了足够的时间来加载新项目。这可能会有所帮助。done_loading仅在没有更多项目要加载时才会启动（对于博客，当您到达最旧的帖子时）)。遗憾的是，当infinitescroll完成当前加载顺序时，无法进行检查：（（目前我使用setTimeout 500毫秒来加载舒尔项目）。