AJAX觸發兩次（無限滾動）。 為什么？

Question

我正在嘗試使用AJAX調試無限滾動實現。

---

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

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


            loadIndex = loadIndex + 1;

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

            setTimeout(function(){

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

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



            }, 1000); // wait 1 second

            })
        }
    })

---

//the-PHP
$loadIndex = $_POST['loadIndex'];

echo $loadIndex;

---

    //the-HTML
    <div class='loadMoreData'></div>
    <div id='loadingDiv'>loadingimage.gif</div>

---

第一次滾動到頁面末尾后，HTML輸出應該為1 ，但是我為12 。 下次我滾動到頁面末尾時，應該以12結尾，但實際上是以1234.結尾1234.

因此，AJAX似乎每次發射兩次。 為什么？

Answer 1

如果您更改邏輯，我想它應該能很好地工作：

$(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;
  });
}

Answer 2

在這種情況下，您需要跟蹤“ isLoading”狀態並停止自動加載行為。

更好的是，在加載ajax請求時刪除滾動甚至偵聽器。 得到回應后，將其重新添加。

Answer 3

為了將來參考，我最初嘗試了以下解決方案，但是沒有用。 我通過@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

                })
             }
   }
})