防抖节流的基本原理

防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能或者是避免资源浪费.毕竟JS操作DOM对象的代价还是十分昂贵的.

防抖

防抖是指在事件触发n秒后在执行回调,如果在n秒内再次触发,则重新计算时间.(就是再触发某个事件后,在下一次触发之前,中间的间隔事件如果超过设置的时间才会发送请求,一直触发就不会发送请求)

代码实现:

function debounce(fn, delay) {
   let timeId = null
   return function() {
      const context = this
      // 如果在n秒内从新计算
      if(timeId) { 
         window.clearTimeout(timeId) 
      }
      // 如果在n秒后调用
      timeId = setTimeout(() => {
         fn.apply(context, arguments)
         timeId = null
      }, delay)
   }
}

应用场景有:

• scroll事件滚动触发
• 搜索框输入查询
• 表单验证
• 按钮提交事件
• 浏览器窗口缩放,resize事件

节流

节流是指如果持续触发某个事件, 则每隔n秒执行一次

代码实现:

function throttle(fn, delay) {
   //设置一个触发开关
   let canUse = true
   return function() {
      //如果为true, 就触发,否则就不触发
      if(canUse) {
         fn.apply(this, arguments)
         //触发开关后,关闭开关
         casUse = false
         //每隔delay秒执行一次
         setTimeout(() => canUse = true, delay)
      } 
   }
}

应用场景有:

• DOM元素的拖拽功能实现
• 射击游戏类
• 计算鼠标移动的距离
• 监听scroll事件