JS .scroll（）を効率的に聞く

Question

私は多くの子を持つスクロール可能な要素と、対応するオプションを持つ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

this suggestion from John Resigをお読みください。基本的には、ユーザーがスクロールするたびにフラグを設定し、このフラグをチェックするインターバル関数で必要なアクションを実行します。