函数节流与函数防抖

1 函数节流

概念

• 一个单位时间，只能有一次触发事件的回调函数执行
• 如果在同一个单位时间内某事件被触发多次，只有一次能生效
• 总的来说，适合大量事件按时间做平均分配触发。

生活中的实例

• 王者荣耀放技能，3s内只能放一次
• 如果一次技能还未结束，那么再次放技能无效

应用场景

• 游戏中的刷新率
• DOM元素拖拽
• Canvas画笔功能

实现思路

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

 const throttled = throttle(()=>console.log('hi'),3000)
 throttled() //打印出hi
 throttled() //无回应
 //3s后
 throttled() //打印出hi

2 函数防抖

概念

• 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
• 总的来说，适合多次事件一次响应的情况

生活中的实例

• 送外卖，每单等五分钟，五分钟后如果没有新单，那么出发送出去
• 如果五分钟内有新单，那么接单后重新定时五分钟，重复以上步骤

应用场景

• 给按钮加函数防抖防止表单多次提交。
• 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
• 判断scroll是否滑到底部，滚动事件+函数防抖

实现思路

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)
     }
 }
 const debounced = debounce(()=>console.log('hi'),t)
 debounced() //开始定时
 t时间后，再次调用（又有人点外卖）
 debounced() //清除定时器，重新定时