Nghe JS .scroll() hiệu quả

Question

Tôi có một phần tử có thể cuộn với nhiều trẻ em và một thẻ chọn với các tùy chọn tương ứng.

Tôi muốn thay đổi giá trị chọn dựa trên các yếu tố .scrollTop()

Làm thế nào để làm điều đó một cách hiệu quả? Tôi nghĩ về việc lưu trữ các trẻ em .offset().top trong một mảng và lặp đi lặp lại nó. Tuy nhiên, trình duyệt không xử lý nó. Tôi có thể thử tạo cờ .setTimeout(), nhưng điều đó dường như không rõ ràng.

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

Làm thế nào về những gì @osoner đã nói + thay vì thực hiện tất cả phép tính trong trình xử lý cuộn ngay, bạn sẽ kích hoạt một sự kiện khác trong bộ xử lý sau một khoảng thời gian (ví dụ: 'fooscroll') và sau đó bạn có tất cả các phần tử con đăng ký sự kiện và tự cập nhật tùy thuộc vào điều kiện bạn đặt.

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

Bạn nên đọc this suggestion from John Resig. Về cơ bản, bạn thiết lập một cờ mỗi khi người dùng cuộn và thực hiện hành động mà bạn muốn với một hàm khoảng thời gian để kiểm tra cờ này.