手写 防抖 节流

防抖（debounce）：一段时间内重复执行的话，只执行最后一次，清除之前的异步任务，重点在清零
应用场景：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
• 页面滚动处理事件

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

function clickHandler() {
  console.log('防抖click')
}

const handler = debounce(clickHandler)
document.getElementById('button').addEventListener('click',handler)

节流(throttle)：只在开始执行一次，未执行完成的过程中如果再次触发(类似于游戏cd)，则忽略，核心在于开关锁
应用场景：

• 点击按钮提交表单，第一次有效

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

function clickHandler() {
  console.log('节流click')
}

const handler = throttle(clickHandler)
document.getElementById('button').addEventListener('click',handler)