JS函数防抖和函数节流

函数防抖和函数节流是优化高频率执行JS代码的一种手段，JS中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

一、防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

也就是说，如果短时间内大量触发同一事件，只会执行一次函数。

function debounce(fn, delay){
     let timerId = null
     return function(){
         const context = this
         if(timerId){window.clearTimeout(timerId)}
         timerId = setTimeout(()=>{
             fn.apply(context, arguments)
             timerId = null
         },delay)
     }
 }

二、节流(throttle)

每隔一段时间，只执行一次函数。

也就是说，如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再执行，直至过了这段时间才重新生效。这相当于游戏里面的技能冷却时间（cd）。

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

三、应用场景

搜索框input事件，如要支持搜索联想功能可以使用节流方案。
页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）。

四、二者异同

相同点：

都可以通过使用 setTimeout 实现。
目的都是降低回调执行频率，以节省计算资源。

不同点：

函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。