张泽依的简书--移动端源生实现上垃加载(已优化)

由于最近接受公司内移动App热部署的试用中心WebApp的项目，里面有非常多的列表加载。

接下来记录一下今天自己踩的巨坑

在后端给出分页的情况下，我试着自己封装一个方法来尝试达到效果，因为Iscroll这些插件需要引入额外的文件，自己强迫症犯了，并没有用Iscroll插件。

今天忙于实现这个，主要运用Scroll事件实现.。运用函数节流以及中间变量来阻断scroll多次执行

在这里只简单说思路。具体代码放于github.com/ouaisheinie

1.Scroll方式实现。

Scroll方法，滚动条实现。判断的依据是用以下3个属性

body.clientHeight      body.scrollTop    window.innerHeight  满足以下条件

body.scrollTop + window.innerHeight > body.clientHeight - n  (n是需要缓冲的高度值)

因为是scroll事件  触发频率极高  在运用时注意  必须用延时器setTimeout 函数节流

注意:函数节流之后 还是会出现滑动下去  一次性请求几次数据，刷新较多的情况

可在节流之前 定义一个变量tur = ture; 运用以下这层关系

if(tur){

    setTimeout(()=>{

    //ajax;

    tur = false;

    },500)

}else{

    setTimeout(()=>{

        tur = ture;

    },1000)

    }

重点是在else里 1000ms之后给tur变脸回置成ture  就会每1000ms才会调用一次ajax的回调

因为移动端滑动比较迅速，这样做最多也就调用2次，不会调用太多次，影响性能，浪费用户流量。