Javascript AJAX触发两次（无限滚动）。为什么？

我正在尝试用AJAX调试无限滚动实现

---

---

---

//HTML
加载image.gif

---

在我第一次滚动到页面末尾之后，我应该在HTML输出中得到一个

1

，但是我得到的是

12

。下次滚动到页面末尾时，我应该以

12

结尾，但实际上我以

1234结尾。

---

因此，AJAX似乎每次发射两次为什么？

如果您改变逻辑，我想它应该可以正常工作：

$(window).scrollTop() > $(document).height() - $(window).height()

之后，您必须添加一个标志来检查新内容是否已加载，然后重新初始化滚动功能以恢复旧内容

// Add a flag
var scrolled = false;
// Change the logic
$(window).scrollTop() > $(document).height() - $(window).height()
// allow AJAX call only if not scrolled
if (!scrolled) {
  // immediately, revert the flag:
  scrolled = true;
  $.ajax(function () {
    // inside the AJAX call, restore it
    scrolled = false;
  });
}

---

如果你改变你的逻辑，我想它应该能很好地工作：

$(window).scrollTop() > $(document).height() - $(window).height()

之后，您必须添加一个标志来检查新内容是否已加载，然后重新初始化滚动功能以恢复旧内容

// Add a flag
var scrolled = false;
// Change the logic
$(window).scrollTop() > $(document).height() - $(window).height()
// allow AJAX call only if not scrolled
if (!scrolled) {
  // immediately, revert the flag:
  scrolled = true;
  $.ajax(function () {
    // inside the AJAX call, restore it
    scrolled = false;
  });
}

---

您需要跟踪“isLoading”状态，并在这种情况下停止自动加载行为

---

更好的是，在加载ajax请求时删除scroll-偶数侦听器。一旦收到响应，请将其重新添加。

您需要跟踪“isLoading”状态，并在这种情况下停止自动加载行为

---

更好的是，在加载ajax请求时删除scroll-偶数侦听器。收到回复后再添加它。

为了以后参考，我最初尝试了以下解决方案，但没有成功。我通过@Louy实现了

isLoading

概念，但我把它放错了行：

//the JavaScript
$("#loadingDiv").hide();
var loadIndex = 0;
var isLoading = false;

if (!isLoading) {
    $(window).scroll(function(){
            if($(window).scrollTop() == $(document).height() - $(window).height()){

                isLoading = true;
                loadIndex = loadIndex + 1;

                $("#loadingDiv").show();
                $.post("ajaxinfinitescroll.php", {loadIndex:loadIndex},function(data){

                setTimeout(function(){

                    $("div.loadMoreData").append(data);

                    $("#loadingDiv").hide();

                    isLoading = false;

                }, 1000); // wait 1 second

                })
        }
    })
}

然后，我从@Praveen_Kumar获得了帮助，并更改了显示

isLoading

的行，它成功了：

//the JavaScript
$("#loadingDiv").hide();
var loadIndex = 0;
var isLoading = false;

$(window).scroll(function(){
   if (!isLoading) {
            if($(window).scrollTop() == $(document).height() - $(window).height()){

                isLoading = true;
                loadIndex = loadIndex + 1;

                $("#loadingDiv").show();
                $.post("ajaxinfinitescroll.php", {loadIndex:loadIndex},function(data){

                setTimeout(function(){

                    $("div.loadMoreData").append(data);

                    $("#loadingDiv").hide();

                    isLoading = false;

                }, 1000); // wait 1 second

                })
             }
   }
})

---

作为将来的参考，我最初尝试了以下解决方案，但没有成功。我通过@Louy实现了

isLoading

概念，但我把它放错了行：

//the JavaScript
$("#loadingDiv").hide();
var loadIndex = 0;
var isLoading = false;

if (!isLoading) {
    $(window).scroll(function(){
            if($(window).scrollTop() == $(document).height() - $(window).height()){

                isLoading = true;
                loadIndex = loadIndex + 1;

                $("#loadingDiv").show();
                $.post("ajaxinfinitescroll.php", {loadIndex:loadIndex},function(data){

                setTimeout(function(){

                    $("div.loadMoreData").append(data);

                    $("#loadingDiv").hide();

                    isLoading = false;

                }, 1000); // wait 1 second

                })
        }
    })
}

然后，我从@Praveen_Kumar获得了帮助，并更改了显示

isLoading

的行，它成功了：

//the JavaScript
$("#loadingDiv").hide();
var loadIndex = 0;
var isLoading = false;

$(window).scroll(function(){
   if (!isLoading) {
            if($(window).scrollTop() == $(document).height() - $(window).height()){

                isLoading = true;
                loadIndex = loadIndex + 1;

                $("#loadingDiv").show();
                $.post("ajaxinfinitescroll.php", {loadIndex:loadIndex},function(data){

                setTimeout(function(){

                    $("div.loadMoreData").append(data);

                    $("#loadingDiv").hide();

                    isLoading = false;

                }, 1000); // wait 1 second

                })
             }
   }
})

---

@MaximillianLaumeister问得好。让我来回答。谢谢，但那没用。当我这么做的时候，什么都不会发生。考虑到左侧可能永远无法大于右侧，我也尝试了

$（window.scrollTop（）>$（document.height（）-$（window.height（））-1

这与我原来的帖子给出的结果相同。当左侧大于右侧时，它不会触发。@user1883050我说你需要重新初始化AJAX调用。也就是说，重新定义。因此，相同的代码将动态重新定义。不起作用，因为从未满足大于条件，所以不会触发任何操作。“我在同等条件下尝试了你的想法，这也导致了AJAX两次开火。”MaximillianLaumeister问得好。让我来回答。谢谢，但那没用。当我这么做的时候，什么都不会发生。考虑到左侧可能永远无法大于右侧，我也尝试了

$（window.scrollTop（）>$（document.height（）-$（window.height（））-1

这与我原来的帖子给出的结果相同。当左侧大于右侧时，它不会触发。@user1883050我说你需要重新初始化AJAX调用。也就是说，重新定义。因此，相同的代码将动态重新定义。不起作用，因为从未满足大于条件，所以不会触发任何操作。我在同等条件下尝试了你的想法，这导致AJAX也启动了两次。