节流/防抖函数 和 better-scroll解决移动端滑动卡顿问题

节流函数

• 就像游戏cd一样，一定时间之内执行一次

  
  
  
  
• 防抖的应用场景，页面窗口滑动

function throttle(func, delay) {
    var prev = Date.now();
    return function () {
      var context = this;
      var args = arguments;
      var now = Date.now();
      if (now - prev >= delay) {
        func.apply(context, args);
        prev = Date.now();
      }
    }
  }

  function handle() {
    console.log(Math.random());
  }
  window.addEventListener('scroll', throttle(handle, 2000));

防抖函数

• 原理：两张图片请求下来的间隔不超过所设置的delay，那就会合并到一起进行请求，将非常频繁的请求次数合并成一次请求的操作叫做节流操作

    mounted() {
                        //监听图片加载完成
            const refresh = this.debounce(this.$refs.scroll.HeightRefresh,50);
            this.$bus.$on('itemImgLoad',() => {
                refresh()
            })
        },
        methods: {
            debounce(fun,delay) {
                let timer = null;
                return function(...args){
                    if(timer) clearTimeout(timer)
                    timer = setTimeout(() => {
                        fun.apply(this,args)
                    },delay)
                }
            }
          }

better-scroll使用方法

content下面只能包括一个元素，content需要固定屏幕的宽高，否则会出现滑动超出。

• 默认情况下BScroll是不可以实时的监听滚动位置
• probe 侦测
• probeType参数
  0,1：都是不侦测实时的位置
  2: 在手指滚动的过程中侦测, 手指离开后的惯性滚动过程中不侦测.
  3: 只要是滚动, 都侦测.
• click属性值，默认是false，但是在默认请况下button按钮时可以点击的

  const bscroll = new BScroll(document.querySelector('.content'), {
    probeType: 3,
    click: true,
    pullUpLoad: true
  })

  bscroll.on('scroll', (position) => {
    console.log(position);
  })

  bscroll.on('pullingUp', () => {
    console.log('上拉加载更多');
   
    // 发送网络请求, 请求更多页的数据

    // 等数据请求完成, 并且将新的数据展示出来后
    //下一次上拉加载更多
    setTimeout(() => {
      bscroll.finishPullUp()
    }, 2000)
  })

  document.querySelector('.btn').addEventListener('click', function () {
    console.log('------');

better-scroll的弊端

在异步请求之后的图片会无法拉取，原因是，在未加载完之前能拉取的高度已经确定了，在新加载之后的图片之后，能拉取的高度并没有更新，需要我们手动更新

• 在数据加载完之后调用实例化对象的refresh()方法

scroll.refresh();

*在keep-alive保存状态之后，返回到原来的组件还是没有保存原来的状态，其原因是出在better-scroll内部，解决方法
组件有两个生命周期
activated 和 deactivated,通过在函数里面保存离开之前的位置，在回来之后设置成原来的位置就行啦