函数防抖（debounce）和函数节流（throttle）

前言#

函数防抖和节流作为性能优化的常用函数，他俩总是一起出现，以至于有时候有些分不清区别，一旦说手写下代码就会一时语塞🌚本文就梳理下以加固理解

函数防抖 debounce#

防抖，顾名思义就是防止抖动，比如输入框输入的时候，绑定的数据会一直改变，如果此时想要在输入结束才去进行接口请求等操作，就需要用到防抖函数，他的作用就是当持续触发的时候，函数是不执行的，等最后一次触发结束的一段时间之后再去执行。比如输入结束之后再去进行接口搜索回显数据。

封装一个简单的防抖函数#

Copy
function debounce(fn, delay) {
  let timer = null
  return function() {
    if(timer) clearTimeout(timer) // 如果有正在计时中的 就清楚定时器
    timer = setTimeout(() =>{ // 否则开启一个定时器 这样如果是高频连续触发的话，计时器就会不断被清掉而没被执行，只有在停下来的时候才会执行
      fn.apply(this, arguments)
    }, delay) 
  }
}

使用示例#

Copy
watch: {
  'form.phone':debounce(val=>{
    console.log(val)
  },1000)
}

函数节流 throttle#

开源节流，节流函数就是在高频触发的时候，每隔一段时间打开一次开关。
节流和防抖的区别不是在输入的时候完全不执行，而是在一段时间内只执行一次。如果产品不希望只有在输入结束才进行接口搜索，而希望在2秒的间隔中都要做一次搜索以保持更高的时效性，那么节流函数是更好的选择。

封装一个简单的节流函数#

Copy
function throttle(fn, delay) {
  let valid = true
  return function() {
    if(!valid) return
    valid = false
    setTimeout(() => {
       fn.apply(this, arguments)
       valid = true // 定时器时间到了之后，则又可以再次执行
    }, delay)
  }
}

使用示例#

Copy
bar.onscroll = throttle(e => {
  console.log(e)
}, 1000)

lodash 里的防抖节流函数#

防抖函数使用

Copy
_.debounce(func, [wait=0], [options={}])

实现代码

节流函数使用

Copy
_.throttle(func, [wait=0], [options={}])

实现代码

看这两个函数的实现，最终都是返回一个函数，throttle还使用了debounce，返回一个debounce函数的
梳理了下，终于算是弄清楚这俩的异同和使用场景了~