проблема с размером документа в meteor js

177

12 декабря 2016, 10:02

Для своего небольшого приложения на meteor.js я хочу сделать бесконечную прокрутку. Я воспользовался примером реализации из статьи https://gentlenode.com/journal/meteor-21-pagination-system-with-infinite-scroll/43
Эта реализация опирается на отлавливание события scroll.

$(window).scroll(function() {
   if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
      incrementLimit();
    }
});

В процессе скроллинга сравниваются значения прокрученной области + размера окна и размера документа. Когда неравенство верно, подгружаются новые данные. Однако, мне не нравится, что при отсутствии полосы прокрутки алгоритм не срабатывает. Такое возможно, например, если начальная порция данных мала и умещается на экране. Я решил сделать проверку, и в случае проблемы подгружать данные до появления полосы прокрутки.

Однако, я столкнулся с проблемой. Ниже часть моего кода:

Template.content_table_tmpl.rendered = function () {
    // is triggered every time we scroll
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            incrementLimit();
        }
    });
    if (($(window).height() >= $(document).height())){
        console.log($(window).height() , $(document).height());
        incrementLimit();
    }
    if (($(window).height() >= $(document).height())){
        console.log($(window).height() , $(document).height());
        incrementLimit();
    }
}

Я ожидаю увидеть следующий результат:
Если размеры окна больше или равны размерам документа, то подгружается новая порция данных, размеры документа увеличиваются, после чего снова происходит такая же проверка. Естественно, не конечный код, а только рабочий момент отладки.

Сама проблема в том, что в процессе выполнения в консоль оба раза выводятся одни и те же значения. Второй if выполняется, даже если после первого появляется полоса прокрутки.
В браузере из консоли $(document).height() дает уже другое, более верное значение.

В чем может быть проблема?

Answer 1

Второе выполняется так же как первое, потому что оно выполняется ПРЯМО СРАЗУ, то есть оно не ждет, когда сработает первый incrementLimit(). Можете проверить это обернув второй кусок setTimeout().

И что будет, если сделать вот так? По идее сразу отработает как надо при загрузке страницы:

Template.content_table_tmpl.rendered = function () {
    // is triggered every time we scroll
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            incrementLimit();
        }
    }).scroll();
}