Javascript jQuery在滚动到页面底部100px时加载内容，触发多个事件

我想让一个事件在用户滚动并接近页面底部时加载更多内容，比如说从底部大约100px，问题是每次滚动页面底部100px时都会触发事件，所以这是一个明显的问题，不可能发生，原因很明显，所以我想知道如何才能做到最好，我已经在这里查看了其他答案/问题，但是一个部分有效的解决方案不适合我需要它做的事情，当我尝试更改它时，它每次都会完全冻结我的浏览器。 问题是：

我看到的答案接近底部，但以下是他建议的代码：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

现在就像我说的，这确实有效，可以防止触发多个事件，问题是我需要无限量的事件触发，比如当你到达底部时，我加载100行信息，但还有1500行，我需要它每次重复加载每一行信息（每次到达页面底部100px部分时）

所以我试着做的是：

 function loadMore()
{
   alert("More loaded");
   $(window).bind('scroll');
 }

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
});

---

就像我说的，每次绑定部分都会立即冻结我的浏览器。

我也遇到了同样的问题。我遇到了这个问题，它真的很有帮助（而且有效）

更新：我查看了代码，我认为重新绑定时，缺少了要重新绑定的函数

函数loadMore（）
{
console.log（“加载更多”）；
$（“正文”）。追加（“”）；
$（窗口）.bind（'scroll'，bindcoll）；
}
函数bindcroll（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-100）{
$（窗口）。解除绑定（“滚动”）；
loadMore（）；
}
}
$（窗口）。滚动（bindScroll）；

这将对您有所帮助

<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

$(window).scroll(function () {
 if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
  if (isPreviousEventComplete && isDataAvailable) {

    isPreviousEventComplete = false;
    $(".LoaderImage").css("display", "block");

    $.ajax({
      type: "GET",
      url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
      success: function (result) {
        $(".divContent").append(result);

        sIndex = sIndex + offSet;
        isPreviousEventComplete = true;

        if (result == '') //When data is not available
            isDataAvailable = false;

        $(".LoaderImage").css("display", "none");
      },
      error: function (error) {
          alert(error);
      }
    });

  }
 }
 });
 </script>

var sIndex=11，offSet=10，isPreviousEventComplete=true，isDataAvailable=true；
$（窗口）。滚动（函数（）{
如果（$（文档）.height（）-50我也遇到了同样的问题。为了解决这个问题，我使用下划线.js库来防止多个事件触发。这是链接。
Hmm，看起来不错，但我不是很确定，我不喜欢使用计时器之类的东西，除非是绝对必要的。一定有更好的解决方案。是的，这在小提琴中似乎是应该的，h尽管我试图让它在我的网站上运行，但是控制台一直在说$（window）.scroll（bindScroll）；​ 有一个语法错误，因为它是一个非法字符。这使我的整个站点无法正确加载。（它完全加载了我的ajax）使用
loadMore（）中的更多代码更新您的问题
function。问题应该就在那里。这正是您上面代码中的内容，我没有做任何更改。它一定是我的javascript文件中的某个内容干扰了它，或者是什么，我不太确定，因为它在JSFIDLE中工作得很好。非常有用，但是如果您按键盘上的“end”，它会被删除翻到页面底部，不断触发loadMore。当我与上一个问题相关时，将找到解决方案并编辑答案
<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

$(window).scroll(function () {
 if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
  if (isPreviousEventComplete && isDataAvailable) {

    isPreviousEventComplete = false;
    $(".LoaderImage").css("display", "block");

    $.ajax({
      type: "GET",
      url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
      success: function (result) {
        $(".divContent").append(result);

        sIndex = sIndex + offSet;
        isPreviousEventComplete = true;

        if (result == '') //When data is not available
            isDataAvailable = false;

        $(".LoaderImage").css("display", "none");
      },
      error: function (error) {
          alert(error);
      }
    });

  }
 }
 });
 </script>