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');
    }
}

Этот код устанавливает бесконечную прокрутку с изотопом и загружает больше элементов, когда пользователь прокручивает страницу вниз. Теперь, когда используется изотопный фильтр, некоторые элементы скрыты, поэтому, когда я загружаю больше элементов на некоторых страницах, может не быть элементов отфильтрованного типа. Итак, здесь мой a.my_test_button должен вступить в игру и загрузить больше элементов, пока не сработает бесконечная прокрутка errorCallback и не установит done_loading в значение true (все страницы загружены, поэтому больше нечего загружать) или количество не скрытых элементов больше 15.

Но приведенный выше код делает это один раз, и я хотел бы, чтобы эта часть зацикливалась до тех пор, пока не будут выполнены вышеуказанные условия.

Как мне изменить этот код, чтобы можно было сделать описанный цикл?


jquery nested-loops infinite-scroll jquery-isotope
person Marcin Bobowski    schedule 19.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

if ( $('#gridcontainer div.isotope-item:not(.isotope-hidden)').size() < 15 && done_loading == false ) {
    $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');
}

можно попробовать с этим.

do{ 
   $container.infinitescroll('retrieve');
   console.log('loaded');
  }while( $('#gridcontainer div.isotope-item:not(.isotope-hidden)').size() < 15 && done_loading == true );
person Animesh Nandi    schedule 24.04.2013
comment
Я думаю, что возникнет проблема с бесконечной прокруткой, которой нужно некоторое время для загрузки новых элементов, и помещение ее в цикл while может убить приложение;). - person Marcin Bobowski; 24.04.2013
comment
Я добавил код, если вы видите, то обнаружите, что я использовал done_loading == true, чтобы убедиться, что он использовал достаточно времени для загрузки новых элементов. Это может помочь. - person Animesh Nandi; 26.04.2013
comment
done_loading срабатывает только тогда, когда больше нет элементов для загрузки (с блогом, когда вы достигли самой старой записи)). К сожалению, нет способа проверить, когда бесконечная прокрутка завершает текущую последовательность загрузки :( (на данный момент я использовал setTimeout с 500 мс, чтобы элементы были загружены). - person Marcin Bobowski; 26.04.2013