上拉加載你這個坑貨~

前兩天剛作的一個項目,須要用上拉加載的方式去請求數據。我原覺得這會是很簡單的，確定分分鐘寫完（不過確實也挺簡單的），只不過仍是坑了我一些的。

坑一

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("you are in the bottom");
　　}
});

看完上面的代碼是否是以爲徹底沒有毛病，嗯吶~，當初我也是這樣以爲的，很對呀。並且我在安卓手機和chrome模擬器上徹底沒有問題。scrollTop獲取的是滾動條滾動的距離，scrollHeight獲取到的是整個文檔的高度，windowHeight是獲取當前也就是你瀏覽器所能看到的頁面的那部分的高度，你已經滾過的高度+你目前看到的剩下的可視高度等於你整個文檔高度的時候，確實表示了滾動條就在文檔的最下面了。嗯，灰常好。而後你就灰常開心的去請求數據去了，也就是這樣：

是否是你如今也以爲木有毛病。我當時測的時候也很開心。可是當我去借了個蘋果的測試機來測的時候尼瑪問題來了。也就是我要講到的第一個坑。這段js對蘋果木有反應。我就想着是咋回事嘛~，搞了半天才發現，原來本身傻了

if(scrollTop + windowHeight == scrollHeight){
　　　　alert("you are in the bottom");
　　}

其實坑就在這句話中，由於是寫的等於，因此只有一個點能判斷到達底部了，若是你不斷的觸動屏幕，頗有可能的你滾動條就已經達不到這個點了，並且加上蘋果手機到達底部的時候，你再滑動的時候頁面會被拖出一個區域，因此這個點對於蘋果手機來講有問題。因此不能改爲一個點。並且還有一個重要的緣由就是，你的數據是請求得來的，你還須要拿數據去渲染頁面，爲了用戶不等待，你須要預留一段時間來請求，而不是等到已經最底部了再去請求。因此我立馬高興的改爲了這樣：

if(scrollTop + windowHeight > scrollHeight -100){
　　　　alert("you are in the bottom");
　　}

這樣就是表明你在距離底部100px的時候都會給你觸發到達底部了。這樣果真蘋果沒問題了。可是我立馬發現了另一個問題，也就是坑二。

坑二

數據重複了，啥意思呢？就是說你的滾動條若是一直在距離底部100px的範圍內獲得話，它就會給你去執行你的render()方法，而後去渲染頁面。你想若是你一直在100px的範圍的話，那他就會給你不斷的去發請求，上一個請求還沒執行完，你又去了，請求的數據確定會被重複。因此解決的辦法呢就是你設置一個標誌，若是上一次請求成功了以後，頁面渲染完成了以後，你再去請求，這樣就行了。代碼以下：

相比於剛剛的代碼，我加上了一個isSucc的變量來判斷，第一次請求這個變量是true，你能夠去請求，一進入後立馬把這個變量設置爲false，表明我此次的請求還沒徹底走完，你下一波等等，等到頁面徹底渲染好了，請求已經done了後你再把這個變量設置爲true，而後下一波就能夠去請求了。

你覺得寫到如今完了，其實還有一個問題，就是當數據庫中已經沒有數據了，你就不能再狂發請求了，因此你還須要幹一件事，就是再設置一個標誌來判斷數據庫中是否還有數據，有，就去請求，沒有就不要再去請求了。
因此最終的代碼應該是這樣：

好啦~到如今爲止一個上拉加載才寫好了，啦啦啦啦啦~寫的不對的地方望大神指教好改正！