小程序的节流与防抖

在屏幕滚动与拖拽的时候，经常会用到一些持续触发的事件，而这类事件不可控触发频率非常高，大大影响了性能，而我们想要让其变得可控，就可以用到节流和防抖两种方案。

1.防抖

防抖指的是事件在高频触发状态时，只收集事件最后一次执行的结果。例如滚动时候产生的scrollTop，只收集停止滚动时
候的scrollTop，实现原理是每次滚动触发时，都清除定时器队列，只执行最后一个定义的定时器。

防抖代码示例

let timer;
Page({
  debounce(e){
    clearTimeout(timer);
    timer = setTimeout(() => {
      console.log(e.detail.scrollTop)
    }, 500);
  }
})

注意：由于作用域的原因，let timer必须放在页面构造器Page外边，否则无法清除定时器队列，导致重复触发！

2.节流

节流指的是降低事件的触发频率，周期性获取事件的执行结果，例如滚动1像素便会触发的滚动事件，我们可以让它周期性
每隔一段时间执行一次。实现原理是下一个定时器任务必须等待当前定时器任务执行完才执行。

节流代码示例

Page({
  data: {
    lock: true
  },
  throttling(e){
    let timer
    if(this.data.lock){
      this.setData({
        lock: false
      })
      setTimeout(()=>{
        this.setData({
          lock: true
        })
        console.log(e.detail.scrollTop)
      },500)
    }
  }
})