RxJS Polling các bản cập nhật liên tiếp trên cuộn vô hạn

Question

Tôi đã xem sự kiện Matthew Podwysocki trên https://www.youtube.com/watch?v=zlERo_JMGCw 29:38

đâu, ông giải thích thế nào họ giải quyết di chuyển trên Netflix. Nơi người dùng cuộn để biết thêm dữ liệu khi dữ liệu trước đó được dọn sạch và tăng thêm (nhưng cuộn lại sẽ hiển thị lại dữ liệu trước đó).

tôi muốn làm tương tự, nhưng tôi nắm lấy code demo Netflix:

function getRowUpdates(row) { 
    var scrolls = Rx.Observable.fromEvent(document, 'scroll'); 
    var rowVisibilities = 
    scrolls.throttle(50) 
     .map(function(scrollEvent) { 
     return row.isVisible(scrollEvent.offset); 
     }) 
     .distinctUntilChanged(); 

    var rowShows = rowrowVisibilities.filter(function(v) { 
    return v; 
    }); 
    var rowHides = rowrowVisibilities.filter(function(v) { 
    return !v; 
    }); 

    return rowShows 
    .flatMap(Rx.Observable.interval(10)) 
    .flatMap(function() { 
     return row.getRowData().takeUntil(rowHides); 
    }) 
    .toArray(); 
} 

Nhưng tôi chút nhầm lẫn về cách chuyển dữ liệu mới hoặc dữ liệu trang theo cuộn ở đây .. Ai đó có thể cung cấp cho ít giải thích về cách tôi có thể làm như sau:

• lấy danh sách đầu tiên (tôi có thể làm điều đó)
• lấy danh sách hơn khi người dùng cuộn xuống (sử dụng phân trang trang tiếp theo)
• lại di chuyển dữ liệu được tìm nạp trước đó từ bộ nhớ và tìm nạp lại theo yêu cầu (cuộn lên).

Answer 1

Đây là cách tôi sẽ làm điều đó trong các dòng chung. Nếu điều này dường như mang đến cho bạn sự hài lòng, tôi sẽ chỉnh sửa và thêm các chi tiết khác.

Version 2: (Đối với một đầu tiên, xem chỉnh sửa thay đổi)

Premises:

1. Thẻ chứa danh sách năng động sẽ được gọi là "khu vực".
2. Mỗi hàng trong danh sách sẽ được chứa trong một DIV khác có thể chứa bất kỳ thứ gì.
3. Một trang đủ hàng để bao phủ khu vực.
4. Ba javascript "hằng số": numberOfLinesOnFirstLoad, numberOfLinesOnPageLoad, numberOfLinesToLoadAfter
5. biến hoạt Javascript để giữ dữ liệu cần thiết: hàng [Trang #], chiều cao [Trang #], currentPageNumber = 1, maxPageNumber = 0
6. trang #: # là số trang
7. hàng [trang #] sẽ chứa cách để đưa chúng trở lại từ cơ sở dữ liệu, chứ không phải đối tượng DOM thực.

bước/Sự kiện:

1. Thêm thẻ khu vực.
2. Tải sốOfLinesOnFirstLoad hàng.
3. Nếu tổng số hàng có chiều cao chiều cao thấp hơn nhân với ba, sau đó tải numberOfLinesToLoadAfter rows. Lặp lại bước 3 nếu các hàng được thêm vào, nếu không hãy tiếp tục đến bước 4.
4. maxPageNumber + = 1. Tìm các hàng tiếp theo lấp đầy khu vực. Thêm các hàng đó vào hàng ["page" + maxPageNumber] (dưới dạng mảng). Tính chiều cao của những cái đó và thêm nó vào chiều cao ["page" + maxPageNumber].
5. Lặp lại bước 4 cho đến khi không còn hàng nào và sau đó tiếp tục bước 6.
6. Khi cuộn xuống và page1 (có nghĩa là phần tử cuối cùng của hàng ["page1"]) không hiển thị, hãy thêm một mục khác bên dưới: page4.
7. maxPageNumber + = 1. Tải sốOfLinesOnPageLoad hàng.
8. Nếu tổng số hàng mới có chiều cao chiều cao kém hơn, sau đó numberOfLinesToLoadSau hàng. Lặp lại bước 8 nếu các hàng được thêm vào, nếu không, hãy đặt tổng chiều cao hàng mới theo chiều cao ["page" + maxPageNumber] và các hàng mới dưới dạng mảng trong hàng ["page" + maxPageNumber] và tiếp tục bước sau khi nhập hàng này hoặc 11).
9. Vẫn cuộn xuống, nếu page2 không hiển thị, hãy xóa các phần tử page1 khỏi DOM và điều chỉnh vị trí cuộn bằng cách xóa page1.height (heights ["page1"]).
10. Tải trang 5 (bước 7 và 8).
11. Vì vậy, bây giờ, có trang 2 đến page5 trong vùng mà page2 và page5 không hiển thị. Nếu page3 hiển thị đầy đủ, hơn page4 thì không, nếu không thì một phần của page3 và page4 hiển thị. (Chỉ để cho biết khả năng, nhưng không quan trọng)
12. Khi cuộn lên và page2 bắt đầu hiển thị (vì vậy phần tử cuối cùng của hàng ["page2"]), tải trang1 bằng cách sử dụng hàng ["page1"], thêm page1. chiều cao (chiều cao ["trang1"]) để cuộn vị trí và xóa page5 khỏi DOM. Tại đây bạn có thể xóa nó khỏi các biến số & & chiều cao và maxPageNumber - = 1, nhưng bạn cũng có thể giữ chúng để tải lại trang này được thực hiện trong một quá trình (vì vậy việc tải trang sẽ ngụ ý kiểm tra xem định nghĩa trang đã tồn tại chưa biến).