前两天刚做的一个项目,需要用上拉加载的方式去请求数据。我原以为这会是很简单的，肯定分分钟写完（不过确实也挺简单的），只不过还是坑了我一些的。

坑一

$(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，然后下一波就可以去请求了。

你以为写到现在完了，其实还有一个问题，就是当数据库中已经没有数据了，你就不能再狂发请求了，所以你还需要干一件事，就是再设置一个标志来判断数据库中是否还有数据，有，就去请求，没有就不要再去请求了。
所以最终的代码应该是这样：

好啦~到现在为止一个上拉加载才写好了，啦啦啦啦啦~写的不对的地方望大神指教好改正！