Прослушивание JS .scroll () эффективно

Question

У меня есть прокручиваемый элемент со многими дочерними элементами и тег выбора с соответствующими параметрами.

Я хочу изменить значение выбора на основе элементов .scrollTop()

Как это сделать эффективно? Я думал о том, чтобы хранить .offset().top детей в массиве и перебирать их. Однако браузер не справляется с этим. Я мог бы попытаться создать флаг .setTimeout(), но это не кажется чистым.

    r = $('ul')
    offsets = []
    r.find('li').each((index) ->
      offsets[index] = $(this).offset().top
    )
    r.bind('scroll', ->
      // while loop checking .scrollTop() > offsets[n] is slow
      // maybe spams to many .scroll events?
    )

Answer 1

Как насчет того, что сказал @osoner + вместо того, чтобы делать все вычисления в обработчике даже для прокрутки, вы запускаете другое событие в обработчике через некоторый интервал (например, 'fooscroll'), а затем все дочерние элементы подписываются насобытие и обновлять себя в зависимости от установленных вами условий.

var scrollTimer;
$(window).on('scroll', function(e) {
    if (scrollTimer) { clearTimeout(scrollTimer); }
    scrollTimer = setTimeout(function() {
       $(window).trigger('fooscroll');
    }, 200);
});

$('li').on('fooscroll', function() {
    // Check scrollTop or whatever...
});

Answer 2

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