Javascript 收集正确的onScroll数据以触发AJAX函数

我使用以下命令调用scroll上的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);
          };
        }
      });
    };
  });
});

//正在收集滚动信息
$（'.tuvert'）。每个（函数（）{
var self=这个；
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（）；
变量scrollPercent=（scrollAmount/documentWidth）*100；
如果（百分比>80）{
page++；
console.log（“process.php？subcategoryId=“+subcategoryId+”&page=“+page”）；
//用于处理JSON的AJAX函数
$.ajax({
url:“process.php？subcategoryId=“+subcategoryId+”&page=“+page，
键入：“获取”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
对于（i=0；i”；
var appendedData=$（self）.find（“表tbody tr td:last child”）.after（response.fadeIn（'slow'）；
$（self）.data（'currentElementPosition'，appendedData.position（）.left）；
};
}
});
};
});
});

我的问题是，一旦第一个响应被添加到内容中，我开始滚动超过80%进入新结果，我滚动的每个像素都会再次调用相同的AJAX函数&而不是等待用户滚动新窗口大小的80%宽度。有效地对滚动超过80%的每个像素进行AJAX调用

---

使用这样的语句时，

if

语句是不是走错了路？我应该提供某种类型的回调来动态驱动触发AJAX函数的整数吗？

我会使用jQuery绑定它一次，然后在AJAX的成功回调中重新绑定它（或之后的任何地方）

另一种方法是保存对由于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（）将给出元素相对于其父容器的位置。

这似乎是一个有趣的解决方案。在最后一个小时里我一直在研究它，但一天快结束了，所以我会在晚些时候或明天重新开始，并报告我的结果+1.现在听你这么说太好了！如果有什么我可以帮你的，请告诉我。在再次查看我的代码示例时，我注意到的一件事是，在AJAX成功函数中，实际上可能会丢失$（this）的预期范围。如果是这样的话，我记不得了。如果您发现这是一个问题，您可以在scroll回调中的任何位置（例如，var scrollmount=…）保存一个变量，如：var self=this，然后在AJAX成功函数中，您可以引用$（self）.data（'currentElementPosition'，appendedData.position（）.left）以获得适当的范围。非常感谢！我继续往下说，在我的整个代码片段中加入了与所讨论的功能相关的内容（试图保持简短和甜美）。我已经在使用

var self-this方法：）关于您建议的编辑，我注意到您的方法的行为更加流畅，但是在初始加载期间和之后，我仍然会收到每个像素的大量AJAX调用。我试图在scroll上设置
.bind（）
，并在回调中设置
.unbind（）
，但我一直被卡住…在设置var appendedData=…，表达式的右侧返回$（self），而不是
响应
。因此，在下一行中，当您设置currentElementPosition时，将其设置为左偏移量$（self），而不是
response
。尝试此语法，而不是var appendedData=$（response）.appendTo（$（self）.find（“table tbody tr td:last child”）.fadeIn（'slow'）；appendTo（）将返回
响应
。还要注意的是，将.fadeIn（）放在方法链的末尾，在您已经向DOM追加了某些内容之后，不会使其淡入，因为追加会自动使其可见。