上拉加载你这个坑货~

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

坑一

$(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，而后下一波就能够去请求了。

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

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