防抖和节流

前言

防抖和节流算是非常普及的概念了，不止在前端，甚至不止在编程领域，许许多多的地方都能用到这两个概念，这篇文章主要总结分享一下我自己在JS中对这两个概念的代码实现。

防抖

防抖顾名思义就是防止或消除抖动，我第一次接触这个概念还是是当初大学学单片机的时候。在前端的领域里面，这个概念可以理解为一个高频率的事件只有在停止触发一定时间后才会执行对应的处理函数，比较常见的场景就是文本框输入时触发的事件。比如输入文字自动搜索的功能，我们在搜索时一般希望输入完一个词组或一个句子后自动进行搜索，而不是每输入一个字或是一个字面后就搜索一次，这里就需要应用到防抖。只有用户停止输入后才会执行事件
代码也很简单:

function debounce(fn, time) {
  let timer = null
  return () => {
    if(timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(fn, time)
  }
}

在这里只有事件停止触发一定时间后才会执行处理函数,如果等待时间内又一次触发时间,那么会重新计时。

节流

节流在这里也是限制高频事件的触发,节流规定了一个单位时间，在这个单位时间内只能触发一次。
防抖和节流的区别用文本框输入文字来演示的话,假如时间都设置为1s,用户不断输入文字,防抖的话是停止输入1s后函数执行,只执行一次。节流则是在用户输入期间,每隔一秒执行一次函数,可能会执行多次。

function throttle(fn, time) {
  let oldTime = 0
  return () => {
    const newTime = new Date()
    if (newTime - oldTime >= wait) {
      fn()
      oldTime = newTime
    }
  }
}

小结

在这里防抖和节流只给出了最简单的代码,如果实际的函数更加复杂,需要考虑到执行上下文的话,那就要用到call或者apply函数来指定this的指向。这个到时候就需要根据实际情况具体分析了。