如何檢測何時頁面滾動到底部並執行函數一次

Question

我使用ajax從Web服務動態加載XML，返回的記錄僅限於每個url'load'或'call'的25個項目。 ...爲了解決這個問題，我有一個用戶向下滾動頁面的過程，當他們達到頁面高度的90％（或者當他們到達頁面底部時 - 不知道我會選擇哪一個），一個名爲startindexnum的變量由25

增加，以致startindexnum開始了在25 ...那麼函數的第一個「火」之後，startindexnum變爲50，它成爲75第三，等等，等等

我問題是它會多次觸發並且有點不穩定 - 處理多次，當我滾動到底部，有時增加超過25（毫無疑問，我認爲是多次運行的結果）。

任何人都知道我需要調整以獲得此正確生成增量startindex變量追加到我檢索XML的Ajax URL嗎？謝謝。

var scrollcount = 1; 
var startindexnum = 25; 
var processing; 

$(document).ready(function(){ 
    $(document).scroll(function(e){ 
     if (processing) 
      return false; 

      window.onscroll = function(ev) { 

      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){ 
       //if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9){ 
        // you're at x% of the page 
        processing = true; 
        scrollcount = scrollcount + 1; 
        startindexnum = scrollcount * startindexnum; 
        console.log(scrollcount); 
        docall(); 

        processing = false; 

       }; 
      }; 
    }); 
}); 

Answer 1

問題是我打賭docall()是一個異步呼叫，該呼叫經過這麼設置的processing到false無助於阻止未來的滾動事件。

在返回結果之前發生false設置。當docall()完成其任務時，您想要將processing設置爲false。

  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){ 
      //if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9){ 
       // you're at x% of the page 
       processing = true; 
       scrollcount = scrollcount + 1; 
       startindexnum = scrollcount * startindexnum; 
       console.log(scrollcount); 
       docall(); 

       //processing = false; <--get rid of this 

      }; 

和

function docall(){ 

    //When you are done fetching the new data and update the page set 
    function AjaxCallIsDone() { 
     processing = false; 
    } 

} 

Answer 2

除了epascarello的帖子...

你不需要的$（document）.scroll（FN）和window.onscroll，你每次執行文檔滾動處理程序時都會附加到它。幾件事情：

1）首先，看看John Resig的這篇文章。 Scrolling by J.Resig

2）如果你想要jQuery的方法，然後使用窗口，而不是文檔$（窗口）.scroll（fn）。

3）如果沒有，那麼我認爲下面會爲你工作：

var scrollcount = 1; 
var startindexnum = 25; 
var processing; 

$(document).ready(function(){ 
    window.onscroll = function(ev) { 
     if (!processing) { 
      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){ 
       processing = true; 
       scrollcount = scrollcount + 1; 
       startindexnum = scrollcount * startindexnum; 
       console.log(scrollcount); 
       docall(); 
      } 
     }    
    } 
});