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

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)
    }
  }
})

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/4255