防抖和节流的介绍及实现

  • 防抖和节流的介绍及实现已关闭评论
  • 28 次浏览
  • A+
所属分类:Web前端
摘要

举个例子:电梯关门案例a 进入电梯 等待5s后 就可以上升了 在a等待了4s中后 b过来 那么之前的等待就结束了 开始新的等待


防抖

概述:在规定时间内只执行一次(执行最后一次)

举个例子:电梯关门案例

  • a 进入电梯 等待5s后 就可以上升了

  • 在a等待了4s中后 b过来 那么之前的等待就结束了 开始新的等待

  • 在b等待了3s后 c过来 那么之前的等待也结束了 开始新的等待

  • .... 直到最后一次等待结束 电梯就上升 (实际电梯上升这个操作 只执行一次 是最后一次)

防抖和节流的介绍及实现

 

 防抖实现

//执行的函数  等待的时间 function debounce(fn,delay){     var timer = null //记录有没有人在等     return function(){         if(timer) clearTimeout(timer) //有人等 上次等待清除         timer = setTimeout(fn,delay) //开始新的等待     } }

示例

let fn = debounce(function(){     console.log('移进去了'); },500) //div移进只执行最后一次 document.querySelector('div').onmouseenter = function(){     fn() }

节流

概述: 在一定时间范围内 执行第一次 (减少执行次数)

举个例子:高铁上厕所案例
  • 当灯是绿灯的时候 a进去了 这个灯变红灯

  • a 没有执行完的时候 b进不去 只有当a 执行完 把红灯变成绿灯 b才能进去

  • 同样的 c也是一样的

防抖和节流的介绍及实现

 

 节流代码实现

function throttle(fn,delay){     var timer = null //默认没有人     return function(){         //判断当前是否有人         if(timer) return //有人不做了 判断节流阀是否开启         timer = setTimerout(()=>{             fn()             timer = null //做完了 将节流阀关闭         },delay)     } }

示例

let fn = throttle(function(){     console.log('移进去了'); },5000) document.querySelector('div').onmouseenter = function(){     fn() }