如何只做一次Ajax調用？

Question

我有以下代碼，當用戶滾動到屏幕底部時觸發。唯一的問題是我希望Ajax調用只觸發一次。我的代碼是：

 var w = $(window); 
     window.onscroll = function(ev) { 
      if ($(document).height() - w.height() == w.scrollTop()) { 


       $('#loading-image').show(); 
       $.ajax({ 
        url: "page-2.html", 
        cache: false, 
        success: function(result){ 
         $("#part2").html(result); 
         console.log(); 
        }, 
        complete: function(){ 
         $('#loading-image').hide(); 
        } 
       }); 


      } 
     }; 

Answer 1

你可以嘗試這樣的：

var bottom_reached = false; 
     $(window).scroll(function(){ 
     if ($(window).scrollTop() == ($(document).height() - $(window).height())) { 
      bottom_reached = true; 

       $('#loading-image').show(); 
      if(bottom_reached) 
      { 
       bottom_reached = false; 
       $.ajax({ 
        url: "page-2.html", 
        cache: false, 
        success: function(result){ 
         $("#part2").html(result); 
         console.log(); 
        }, 
        complete: function(){ 
         $('#loading-image').hide(); 
        } 
       }); 

      } 
      } 
      }); 

Answer 2

最簡單的方法，你可以添加一個全局變量，並檢查它是這樣的：

var w = $(window); 
var BOTTOM_REACHED = false; 
window.onscroll = function(ev) { 
    if ($(document).height() - w.height() == w.scrollTop() && !BOTTOM_REACHED) { 
     BOTTOM_REACHED = true; 
     $('#loading-image').show(); 
      $.ajax({ 
       url: "page-2.html", 
       cache: false, 
       success: function(result){ 
        $("#part2").html(result); 
        console.log(); 
       }, 
       complete: function(){ 
        $('#loading-image').hide(); 
        BOTTOM_REACHED = false; 
       } 
      }); 


     } 
    };