函数防抖(debounce)和函数节流(throttle)

前言

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

函数防抖 debounce

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

封装一个简单的防抖函数

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

使用示例

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

函数节流 throttle

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

封装一个简单的节流函数

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

使用示例

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

lodash 里的防抖节流函数

防抖函数使用

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

实现代码

节流函数使用

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

实现代码

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

posted @ 2021-01-19 10:04  c-137Summer  阅读(70)  评论(0编辑  收藏