有效地听JS .scroll()

Question

我有一个带有许多子项的可滚动元素和一个带有相应选项的select标签.

我想根据元素更改select的值 .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

你应该阅读John Resig的这个建议.基本上,每次用户滚动时都会设置一个标志,并使用检查此标志的间隔函数执行所需的操作.