什么是防抖和节流？如何实现防抖和节流？

防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能或者说避免资源浪费。毕竟JS操作DOM对象的代价还是十分昂贵的。
应用场景：处理一些频繁触发的事件，例如mousedown、mousemove、keyup、keydown等，不然的话，页面很可能会十分卡顿哦~

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

举个例子吧：
例如，你是一个肯德基外卖配送员，每天专门配送去学校的外卖（不考虑配送时间）。
如果每次只配送一单，肯定很划不来。
你接到一个配送订单，心里想在等3分钟，如果3分钟没有配送订单我就配送
如果又有一个配送订单，你就会想再等3分钟，
直到3分钟没有什么外卖订单，就开始配送

那么用代码怎么实现呢？

//接一个订单，和等待时间
function debounce(fn, delay){
     let timerId = null
     return function(){
         const context = this
         //如果接到订单就再等3分钟
         if(timerId){window.clearTimeout(timerId)}
         //3分钟没有接到订单就直接配送
         timerId = setTimeout(()=>{
             fn.apply(context, arguments)
             timerId = null
         },delay)
     }
 }

节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

举个例子吧：
例如你在打王者荣耀，你的技能在3秒能触发一次
触发一次后，3秒能将不能被触发。

那么用代码怎么实现呢？

function throttle(fn, delay){
     // 设置一个触发开关
     let canUse = true
     return function(){
     //如果为true，就触发技能，否则就不能触发
         if(canUse){
             fn.apply(this, arguments)
             //触发技能后，关闭开关
             canUse = false
             //在3秒后打开开关
             setTimeout(()=>canUse = true, delay)
         }
     }
 }