滾動功能上的Ajax加載數據

Question

如何創建一個通過Facebook或Twitter等Ajax動態加載數據的函數？

我已經寫了一個基於我所做的研究的函數，但它似乎並沒有工作，所以我願意聽到你是如何做到的。

$(document).ready(function() { 
    $(window).scroll(function() { 
    var pagenumber = document.getElementById("pagenumber"); 
    var results_box = document.getElementById("results_box"); 
    var combo= pagenumber.innerHTML.split("|"); 
    var pn = parseInt(combo[0]); 
    var last= parseInt(combo[1]);  
    if($(window).scrollTop() == $(document).height() - $(window).height()) {    
     // ajax call get data from server and append to the div 
     results_box.innerHTML="Loading..."; 
     if(last != 1){ 
      if (pn < last) { 
      request_page(pn+1); 
      }    
      else if(pn==last){ 
      pagenumber.innerHTML = pn+1 +"|"+last; 
      request_page(last);             
      } 
      else{ 
      results_box.innerHTML="No More Content available"; 
      } 
     } 
    } 
    }); 
}); 

此功能在控制檯中不顯示任何問題，但它不會觸發或一次加載多個頁面。所有的投入是受歡迎的

Answer 1

當我完成無限滾動時，當滾動位於底部邊緣的10％以內時，將觸發腳本，而不是完全平等。這有助於以更可靠的方式觸發該功能。您可以通過在ajax調用開始時在DOM上設置變量並在其重置時立即阻止多個負載。我已將這些想法應用於下面的代碼。希望能幫助到你。

$(document).ready(function() { 
    $(window).scroll(function() { 
     var pagenumber = document.getElementById("pagenumber"); 
     var results_box = document.getElementById("results_box"); 
     var combo = pagenumber.innerHTML.split("|"); 
     var pn = parseInt(combo[0]); 
     var last = parseInt(combo[1]);  
     if ($(document).hasClass("idle") && ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9)) {    
      //ajax call get data from server and append to the div 
      //when request begins ("beforeSend"), $(document).toggleClass("idle"); 
      results_box.innerHTML = "Loading..."; 
      if (last != 1) { 
       if (pn < last) { 
        request_page(pn+1); 
       } else if (pn == last) { 
        pagenumber.innerHTML = pn + 1 + "|" +last; 
        request_page(last);             
       } else { 
        results_box.innerHTML = "No More Content available"; 
       } 
      } 
      $(document).toggleClass("idle"); 
     } 
    }); 
});