防抖与节流

防抖与节流

最近在看面试题，发现对防抖与节流的概念一直有些模糊，今天研究了一下，弄懂了两者间的区别，记录一下

防抖与节流的作用都是用于控制短时间内大量操作，让浏览器不会因为短时间太过频繁的执行导致页面卡顿

防抖与节流都是通过定时器实现的
防抖效果：1秒内，只要有新的任务触发，取消上一个任务，重新计时
节流效果：1秒内，当前任务未执行完毕，新触发的任务无效

防抖

防抖指的是当短时间出现大量要执行的重复任务时，当A任务准备开始执行时，B任务出现了，这时取消A任务的执行，直接执行B任务

用一个例子展示防抖效果：给页面绑定一个鼠标移动事件，一般情况下，鼠标移动事件触发极为频繁，此时若在事件中处理复杂的逻辑，容易导致浏览器卡死，使用防抖解决该问题效果如下

防抖前：
在页面上随便移动下鼠标,mousemove打印了1000多次，触发非常频繁

window.document.addEventListener('mousemove',()=>{
  console.log('mousemove')
})

防抖后：
只有当鼠标停止移动超过1秒钟后才打印mousemove，极大减少了浏览器的压力

//防抖函数，接收一个函数和定时器延迟触发的事件
function debounce(fn,time){
  let timer
  return function(){
    clearTimeout(timer) //当前若还有定时器未执行取消定时器
    timer = setTimeout(() => { 
      fn()
    },time)
  }
}

window.document.addEventListener('mousemove',debounce(()=>{
  console.log('mousemove')
},1000))

节流

节流的概念与防抖类似，区别是大量重复任务出现时，当前任务未执行完毕时，出现的任务取消

//节流函数，接收一个函数和定时器延迟触发的事件
function throttle(fn,time){
  let flag
  return function(){
    // 设置一个标志位，当标志位为true说明正在当前有任务正在执行
    if(flag === true) return
    flag = true
    setTimeout(() => { 
      fn()
      flag = false
    },time)
  }
}

window.document.addEventListener('mousemove',throttle(()=>{
  console.log('mousemove')
},1000))