面试系列:防抖和节流

今天听到关于防抖和节流最容易理解的解释，记录一下。

• 防抖

就是发动技能的吟唱（战术前摇），需要一定时间，而且会被打断。打断之后只能重新吟唱。所以手写出来就是：

function debounce(fn, time) {
  let timer = null
  return function() {
    // 如果被打断，重新吟唱
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(fn, time)
  }
}

const click = debounce(()=>{console.log(1)}, 1000)
click()

• 节流

就是技能发动后的冷却时间（cd），技能发动一段时间内，不能再次发动，只能等cd结束才能再次发动。所以手写出来就是：

function throttle(fn, time) {
  let timer = null
  return function() {
    // 冷却结束后，才能再次发动
    if(!timer) {
      timer = setTimeout(()=>{
        // 没处理带参函数
        fn()
        // 防止内存泄露
        timer = null
      }, time)
    }
  }
}

带参函数情况：

function throttle(fn, time) {
  let timer = null
  return function() {
    let _this = this 
    let _args = arguments
    // 冷却结束后，才能再次发动
    if(!timer) {
      timer = setTimeout(()=>{
        // 带参函数
        fn.apply(_this, _args)
        // 防止内存泄露
        timer = null
      }, time)
    }
  }
}