面试官：防抖和节流的区别是啥？实现一个防抖和节流函数

前端老道

发布于 2022-12-01 10:00:58

6290

发布于 2022-12-01 10:00:58

文章被收录于专栏：Vue开发社区

一、为什么要防抖和节流？

我们在开发程序的过程中，可能会频繁的点击某一个事件，或者短时间内请求多次接口，对事件处理函数的频率没有进行限制，从而导致浏览器卡顿或者卡死，导致用户体验非常差。防抖和节流函数就是为了限制函数的执行次数和 短时间内不必要多次执行函数，从而提高项目性能。

二、防抖

防抖就是事件触发n秒后再执行回调函数，但此时在n内，多次触发事件，则重新计时，保证代码只执行一次。

代码：

function debounce (fn, await) {
  let timer = null // 定义一个定时器的变量
  return function () { // 用闭包返回一个函数，解决this指向问题
    if (timer) { // 如果存在定时器，再次触发事件，则清空定时器，重新计时
      clearTimeout(timer)
    }
    timer = setTimeout(() => { 
      fn.apply(this, arguments)  // 改变执行函数的this指向，将原先执行函数的this指向改为当前环境
    }, await) // 延迟多少毫秒执行
  }
}

使用场景：

scroll事件滚动
浏览器窗口的缩放resize事件
搜索框输入查询的时候
表单验证
按钮的提交事件

三、节流

当事件触发之后，约定单位时间之内，事件里面的代码最多只能执行 1 次。所以，节流减少了单位时间内代码的执行次数，从而提高性能。

代码：

  function throttle (fn, await) {
    let timer = null // 定义一个定时器的变量
    return function() { // 用闭包返回一个函数，解决this指向问题
      if (!timer) {
        time = setTimeout(() => { 
          fn.apply(this, arguments); //改变this指向
          timer = null; // 清空定时器
        }, await)
      }
    }
  }