防抖

防抖的意思是类似我们在玩娃娃机的时候,比如我们投了两块钱,这时候我们有两次机会去抓娃娃,有些小孩子选中目标之后疯狂得按住按钮,但是这时候剩下机会还剩一次,不是一直按着,两次机会就没了,而是等待你松开之后一定的时间内再按。才会触发这个钩子下来的事件

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器,延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

节流

考虑一个场景,滚动事件中会发起网络请求,但是我们并不希望用户在滚动过程中一直发起请求,而是隔一段时间发起一次,对于这种情况我们就可以使用节流。

// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
  // 上一次执行该函数的时间
  let lastTime = 0
  return function(...args) {
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

setInterval(
  throttle(() => {
    console.log(1)
  }, 500),
  1
)

区别

防抖字面的意思是防止抖动,防止误触,所以他是等你不操作了,过一段时间之后再自动给他注册事件,而节流的字面量意思就是只要假如你触发了一次,开始计时5秒内不能再去触发了,5秒后你又可以去触发事件了

Last modification:October 20th, 2019 at 02:07 pm
If you think my article is useful to you, please feel free to appreciate