防抖和节流

防抖

规则

• 防抖是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则计时清零，重新计时；
• 多次触发，只执行最后一次，如等电梯时，只要有一个人进来就需要再等n秒电梯才能关；

使用场景

• 高频率触发的事件，如频繁点击按钮会发送过多的请求，使用防抖只让规定时间内最后一次触发的事件执行；
• 浏览器行为，如scroll/resize， 频繁触发会造成计算过多；
• 编辑行为的实时保存， 在无任何操作一定时间后，进行保存；

函数封装

function debounce(fn, delay) {
  let timer
  return function(...args) {
  if(timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() =>{
    //使用apply改变this的指向，第一个参数为待被指向的对象（timer），剩余的参数传入借过来的函数 （fn）中，作为借过来的函数的参数
    fn.apply(this,args)
  }, delay) 
  }
}

函数使用

function task() {
  //to do ...
}
debounce(task, 1000)

节流

规则

• 节流可以控制事件发生的频率，如控制1秒发生一次；
• 就像红绿灯，每等一段特定的时间就可以过一批；
• 节流类型分为时间戳版和定时器版本，时间戳版本函数的触发是在时间段开始的时候，然后下一次函数的触发是在下一段时间段开始时；定时器版本函数的触发是在上一段时间段结束的时候，下一次函数的触发是在这一次时间段结束的时候；

使用场景

• 高频率触发的事件（resize/scroll），在一段时间内只触发一次；
• 鼠标触发的事件（如点击事件）单位时间内只触发一次；
• 每个时间间隔计算一次进度，如滚动事件是否滚动到底部自动加载更多；

函数封装

//fn:使用节流的函数 ; delay:延迟执行的时间间隔; type: 节流类型（时间戳版/定时器版）;
function throttle(fn, delay, type) {
  if(type === 1) let previous = 0
  if(type === 2) let timeout
  let delay = delay || 0
  return function () {
    let self = this
    let args = arguments
    if(type === 1) {
      let now = Date.now()
      if(now - previous > delay) {
        previous = now
        fn.apply(self, args)
      }
    }else if(type === 2){
      if(!timeout) {
        timeout = setTimeout(() => {
          timeout = null
          fn.apply(self, args)
        }, delay)
      }
    }
  }
}

函数使用

function task() {
  //to do ...
}
debounce(task, 1000, 1)