如何在用戶滾動到頁面底部時只加載一次數據？

Question

我有一個從PHP腳本動態加載HTML的頁面，當用戶滾動到頁面的底部時，該腳本會擦除另一個站點的圖像鏈接。問題是腳本需要一段時間才能完成，並且檢測到用戶滾動到頁面底部的函數會被觸發多次，並且會多次加載HTML，從而導致重複的圖像集。有沒有一種簡單的方法讓JavaScript等到HTML被加載後再讓該函數再次運行？檢測/加載腳本如下所示：

$(window).scroll(function() { 
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) { 
     //alert("at the bottom."); 
     $.post("function.php", function(data) { 
      $('#wrap').append(data); 
      }); 
    } 
}); 

謝謝！

Answer 1

var loadAgain = true; 
$(window).scroll(function() { 
    if (loadAgain && $(window).scrollTop() >= $(document).height() - $(window).height() - 10) { 
     loadAgain = false; 
     //alert("at the bottom."); 
     $.post("function.php", function(data) { 
      $('#wrap').append(data); 
      loadAgain = true; 
     }); 
    } 
}); 

Answer 2

試試這個：

var loadFinished = true; 
$(window).scroll(function() { 
    if (loadFinished && ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)) { 
     //alert("at the bottom."); 
     loadFinished = false; 
     $.post("function.php", function(data) { 
      $('#wrap').append(data); 
      loadFinished = true; 
     }); 
    } 
}); 

Answer 3

組布爾狀態，以確保該事件不會觸發一次，直到它完成了。像這樣：

var loading = false; 
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) { 
     if (!loading) { 
      loading = true; 
      $.post("function.php", function() { 
       loading = false; 
      }) 
     } 
    }