sui mobile无限滚动时会触发多次请求问题处理

首先，说问题之前，首先我们先看一下sui mobile 官网无限滚动的实现代码，（这里主要是说底部无限滚动）。
官网中提到，要实现无限滚动，只需要“在可滚动的容器上添加“infinite-scroll”类，一般是页面滚动区域 - div.content”

其中，data-distance - 属性用来配置页面滚动到离底部多远时触发无限滚动事件，默认是50 (px)。另外，以下，是官网demo中实现无限滚动的js部分。

官网的demo中可以看出，它实现此功能并没有涉及到任何的请求，对于我们真正要在项目中实现此功能时，如果是单单把返回的数据展现出来，或许还适用，但是，往往我们在项目中都会涉及到请求及分页显示数据，此时由于涉及到了请求数据操作，如果再像demo中的方法去实现，就有可能发生了频繁发送请求的问题了，而通常，我们的需求确是当我们手滑动屏幕，当底部出现加载时才开始发出请求。此时，我们需对js进行如下修改。

以上代码就是涉及到数据请求的处理，只是，如果数据请求是异步请求，那么上面的实现方法还是存在问题的。首先看，图中的红框的第一步，重置loading，第二个红框，数据请求。如果用户每次都只是滑动一次，正常来说是没问题，但是，假如用户不断地上下滑动，那么，当滚动条距离底部data-distance 的像素时，就会触发请求，如果多次触发请求，那么由于是异步请求，它的上一个请求可能还没完成，而loading就被重置了，这样也会导致卡顿或者其他问题。因此，我们可以再次进行修改，把重置loading这个修改标示放到异步请求完成之后的回调函数里面，同理，.infinite-scroll-preloader提示层添加loadHide样式也一样要放到请求完成后的回调函数里面。代码如下：

经过以上的修改，就实现了异步请求数据操作功能了，开心的，以为这一模块终于可以告一段落了。然而（纳尼，还有但书？不要吓宝宝啊，宝宝的小心脏，嘤嘤嘤），某天同组小伙伴console测试，发现，别说是快速上下滑动屏幕了，就是小心翼翼地滑动一次，测试结果，console语句至少都会执行两次。小伙伴把问题描述后，本宝就再次加深研究，终于是找出了原因了。
sui mobile实现无限滚动，在DOM结构中必须有的属性为data-distance，而且这个值不能为0，为0的话不管如何滚动都不会触发infinite事件，进而不会有任何请求发生。此时，假设data-distance的属性值为30，只要滚动条距离底部30像素的区域范围内有任何的滚动，不管是向下滚动还是向上滚动，都会触发infinite事件。知道原理后，那么原因就很简单了。当用户向下滑动滚动条时，滚动条底端距离底部小于等于30px时，触发一次infinite事件，而此时，在达到这个条件时，底部会显示一个“正在加载”的提示语，DOM结构内容添加，那么滚动条可能在30px范围内滑动，此时又触发infinite事件，这是“至少会执行两次”的原因，如果执行多次，那么有可能就是首次触发infinite事件时，发生请求，返回新条目后DOM结构又新添加新内容，滚动条又滑动，若还在30px范围内就会再次触发……，如此一来，才会存在有触发多次，甚至发起多次请求的问题。
那么又该如何处理才能避免多次触发并发起请求这个问题呢？相信很多童鞋们，看到滚动、避免多次调用，会想到debounce和throttle 函数，关于debounce和throttle的区别这里不多加解释，有兴趣的娃可以自行查阅相关资料去了解。我这里主要是用到undercore里面的_.debounce函数来处理的，并且对滚动条滚动的方向进行判断一下，当滚动条向下滑动时才触发并发起请求，向上滑动时不发起请求。此外，应该注意的是在请求出错是，当前页数应要再减1，因为当前页数在发起请求前就加1了，所以出错时要回到上一个请求的页码（此细节未在下图代码中体现）。具体代码如下所示：

以上才终于算是对无限滚动触发多次请求问题进行了较符合需求的处理，可能还会存在问题，如发现有什么问题，欢迎留言，共同探讨。