0

私はこれでスクロール時にAJAX関数を呼び出しています：

// Collecting scroll info
$('.overthrow').each(function() {

  var self = this;
  var path2root = ".";
  var subcategoryId = $(this).attr('data-subcategoryId');
  var page = 1;

  $(this).bind('scroll', function() { 

    var scrollAmount = $(self).scrollLeft();
    var documentWidth = $(self).data('currentElementPosition') || $(document).width();
    var scrollPercent = (scrollAmount / documentWidth) * 100;

    if (scrollPercent > 80) { 

      page++;

      console.log("process.php?subcategoryId=" + subcategoryId + "&page=" + page);

      // AJAX function for processing JSON
      $.ajax({
        url: "process.php?subcategoryId=" + subcategoryId + "&page=" + page,
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          for(i = 0 ; i < data.length; i++) {
            var articleId = data[i].articleResult.articleId;
            var title = data[i].articleResult.title;
            var subhead = data[i].articleResult.subhead;
            var image = data[i].articleResult.image;
            var response = "<td><div class='articleResult'><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'><img src='" + image + "' width='120'/></a><br><h3><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'>" + title.substring(0,25) + "</a></h3></div></td>";

            var appendedData = $(self).find("table tbody tr td:last-child").after(response).fadeIn('slow');
            $(self).data('currentElementPosition', appendedData.position().left);
          };
        }
      });
    };
  });
});

私の問題は、最初の応答がコンテンツに追加され、80％を超えて新しい結果にスクロールし始めると、ユーザーが80％の幅をスクロールするのを待つのではなく、スクロールする各ピクセルが同じAJAX関数を何度も呼び出すことです。新しいウィンドウサイズの。各ピクセルに対して効果的にAJAX呼び出しを行うと、80％を超えてスクロールされます。

ステートメントは、ifこのようなものを使用するための間違ったルートですか？AJAX関数をトリガーする整数を動的に駆動するために、ある種のコールバックを提供する必要がありますか？

4

2 に答える 2

1

jQueryのone（）を使用して一度バインドし、ajaxの成功コールバックで再バインドします（またはその後の任意の場所）

于 2012-09-25T20:11:12.113 に答える
1

もう1つの方法は、AJAX呼び出しの結果としてDOMに追加するものへの参照を保存し、その位置を取得して、スクロール位置をそれと比較することです。つまり、上記の例で、$（this）がAJAXを介して返されるすべてのデータが挿入される親コンテナーであると仮定すると、次のようになります。

$(this).scroll(function () {
               var scrollAmount = $(this).scrollLeft();
               var documentWidth = $(this).data('currentElementPosition') || $(document).width()
               var scrollPercent = (scrollAmount / documentWidth ) * 100;
                  if (scrollPercent > 80) { 
                      // AJAX function success
                          var appendedData = $(data_returned_from_ajax_call).appendTo($(this))
                          $(this).data('currentElementPosition', appendedData.position().left)
                     };
                  });
}

参考までに、注意すべき重要な点は、jQueryの.offset（）メソッドはドキュメントに対する要素の位置を示し、.position（）はその親コン​​テナに対する相対的な位置を示すことです。

于 2012-09-25T20:39:29.073 に答える