5

Railsアプリに無限スクロールページを実装しようとして、このrailscastをフォローしています。ユーザーがページの一番下までスクロールすると、新しいアイテムのセットが追加されてページが拡張されますが、ページに複数回追加され、配列内のすべてのアイテムが読み込まれている場合でも、スクロールダウン時にイベントが再度トリガーされます、同じアイテムのセットを再度複数回追加します。

私が欲しいのは、ユーザーが一番下にスクロールするたびにアイテムの「次のページ」を追加し、ユーザーが再び一番下にスクロールすると次のページを追加することです。

この関数のjQueryは次のとおりです。

jQuery ->
  if $('.pagination').length
          $(window).scroll ->
                  url = $('.pagination .next_page').attr('href')
                  if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
                      $('.pagination').text('Fetching more products...')
                      $.getScript(url)
$(window).scroll()

これが対応するJavaScriptです

$('#products').append('<%= j render(@products) %>');
<% if @products.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
    $('.pagination').remove();
<% end %>
4

1 に答える 1

8

$.getScript(url)ユーザーが下から50ピクセルまでスクロールすると、コードによって呼び出しがトリガーされます。次に、下から49pxまでスクロールした場合に別の呼び出しを行います。次に、下から48pxまでスクロールすると、AJAX呼び出しの1つが戻ってページの高さが高くなるまで、これが続きます。ページの高さが高くなると、50pxゾーンの外に出て、Fetching moreproducts...が停止します。

getScript一度に1つだけ行きたいです。それらが50pxゾーンにスクロールしたら、サーバーからさらにいくつかのものをフェッチし（1回だけ）、サーバーが応答するまで後続のスクロールを無視します。

次のようなことをする必要があります。

$(window).scroll ->
    # Bail out right away if we're busy loading the next chunk.
    return if(window.pagination_loading)

    url = $('.pagination .next_page').attr('href')
    if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
        # Make a note that we're busy loading the next chunk.
        window.pagination_loading = true

        # Load as before but attach a callback to clear the flag when we're done.
        $('.pagination').text('Fetching more products...')
        $.getScript(url).always -> window.pagination_loading = false

$.getScriptを返し、基になる呼び出しが終了するjqXHRと、jqXHR'sコールバックが呼び出されます。always$.ajax

于 2012-11-25T21:26:16.733 に答える