jquery - jQuery、無限スクロール、同位体 - 関数をループし、外部変数が変更されたときに中断する

Question

いくつかのサンプル 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');
    }
}

このコードは、アイソトープを使用して無限スクロールを設定し、ユーザーが下にスクロールすると、より多くの要素を読み込みます。現在、アイソトープ フィルターを使用すると、一部の要素が非表示になるため、一部のページでさらに要素を読み込むと、フィルター処理された種類の要素がない場合があります。したがって、これは、a.my_test_buttoninfinitescrollが起動して trueerrorCallbackに設定done_loadingされるまで (すべてのページが読み込まれているため、読み込むものが何もない)、または非表示の要素の数が 15 を超えるまで、私がプレイしてさらに多くのアイテムを読み込む必要がある場所です。

しかし、上記のコードはそれを 1 回実行します。上記の条件が満たされるまで、この部分をループさせたいと思います。

このコードを変更して、記述されたループを作成するにはどうすればよいですか?