防抖节流基本原理及实现

防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能或者说避免资源浪费。毕竟JS操作DOM对象的代价还是十分昂贵的。

防抖

防抖是指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求）

实现代码如下：

function debounce(fn, delay){
     let timerId = null
     return function(){
         const context = this
         //如果在n秒内从新计算
         if(timerId){window.clearTimeout(timerId)}
         //如果在n秒后调用
         timerId = setTimeout(()=>{
             fn.apply(context, arguments)
             timerId = null
         },delay)
     }
 }

主要应用场景有：

• scroll事件滚动触发，
• 搜索框输入查询
• 表单验证
• 按钮提交事件
• 浏览器窗口缩放，resize事件

节流

节流是指如果持续触发某个事件，则每隔n秒执行一次。

实现代码如下：

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

主要应用场景：

• DOM元素的拖拽功能实现
• 射击游戏类
• 计算鼠标移动的距离
• 监听scroll事件