防抖 和 节流

防抖 debounce

定义

所谓防抖就是触发事件之后，将多次触发合并成一次执行，即在规定时间内回调函数只执行一次，如果在时间内事件被触发，则该回调函数的执行时间从触发时重新计算。

适用场景

• mousemove 鼠标滑动事件
• input 输入事件

代码实现

function debounce(fn, delay){
  let timer
  return function(){
    if(!timer){ //如果定时器不存在，就定一个
      timer = setTimeout(()=>{
        fn.apply(this, arguments) //不绑定this，这里的箭头函数会指向window
      },delay)
    }else{
      //如果定时器存在，就清除掉，再定一个
      clearTimeout(timer) 
    }
  }
}

思路分析

触发事件-->存在定时器-->清除定时器-->下次触发重新定一个
触发事件-->不存在定时器-->定一个delay时间后执行的定时器-->执行回调函数

节流 throttle

定义

事件多次触发，只在一定时间内执行一次，只有在大于规定时间后才会再次触发。

适用场景

• 商品搜索列表、商品橱窗等
• 用户滑动时 定时 / 定滑动的高度 发送请求

代码实现

设置一个标识，表示是否处于规定时间内

function throttle(fn, delay){
  let flag = true
  return function(){
    if(flag){
      setTimeout(()=>{
        fn.apply(this, arguments)
        flag = true
      },delay)
    }
     flag = false
    
  }
}

根据时间判断

function throttle(fn, delay){
  let time = 0
  return function(){
    let now = new Date()
    if(now-time > delay){ //两次触发事件的时间差大于delay则执行函数
      fn.apply(this, arguments)
      time = now //将此次的时间记下，用于下次对比
    }
  }
}

思路分析

都是判断是否在规定时间内，在时间内就执行函数，然后改变状态。不在就跳过。