防抖函数与节流函数

防抖函数与节流函数

本文写于 2020 年 6 月 1 日

今天看到了两个函数，防抖函数与节流函数。

这俩函数名字看起来是不是十分高端？

但是对于前端而言，这一年多的学习让我明白——不要望文生义，更不要望文生畏！

那么，啥是防抖？啥是节流？

请先思考两个故事。

故事一：

首先想象我们回到了 25 年前，我们的网速还是在 18kb/s 。

这个时候我们访问了现代的淘宝，准备备战 618。

但是很不幸，因为网速过慢，我们在购买的时候迟迟没有反应，所以我们一次又一次的点击“立即购买”。

假设这个淘宝是平行空间的淘宝，他们没有做任何防止重复提交的技术。

那么我们的多次点击，将会把所有的请求全部上传！恭喜你，购买了 N 件同样的商品。

故事二：

如果我们有 10 部电梯和 10 个用户，这些用户会以 5 秒钟的间隔依次进入电梯。并且用户一旦进入电梯，电梯门就会关闭，不可停止。

那这个时候，10 个用户，就会乘着 10 个电梯，顺着相差 5 秒的电梯一起上行。

这也太浪费资源了！

1. 防抖

所谓防抖函数，就是当我们连续的调用 foo() 函数时，总是会中断之前的函数，然后立即执行最新的一次调用。

为啥要这么做呢？想想刚刚的电梯故事，多么的浪费资源！

但是如果这个故事发生在日常的生活中，我们会如何处理？

如果仅仅在短时间内，我们完全是可以按住“上行”按钮停住电梯门的。这样我们所有的人就能一起上行。

这就是防抖。

防抖函数具体到底有哪些用途呢？

• 给按钮加函数防抖防止表单多次提交；
• 对于输入框连续输入进行 Ajax 验证时，用函数防抖能有效减少请求次数；
• 判断页面滑动何时停止。

2. 节流

节流规定一个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

当我们在编写网页的时候，如果我们需要实现 DOM 拖拽功能，一般都会给 move 事件添加回调函数。

但是真正运行的时候我们会发现：每当元素稍微移动一点，就会触发了大量的回调函数，导致浏览器直接卡死。

除了 DOM 另外一个例子就是电影。

我们知道当 1 秒内连续播放 24 张以上的图片时，人的眼中这些图片就会形成一个连贯的动画。

所以在电影的播放中基本是以每秒 24 张的速度播放的，为什么不 500 张或更多是因为 24 张就可以满足人类视觉需求的时候，500 张就会显得很浪费资源。

对于函数节流，有如下几个场景：

• 游戏中的刷新率；
• DOM 元素拖拽；
• Canvas 画笔功能。

上代码：

/*
 * 防抖函数 debounce
 * fn 是执行的函数，wait 是防抖的时间间隔
 */
function debounce(fn, wait) {
  // 用一个变量来记录是否到达了防抖的时间
  let timer = null
  return function() {
    // 如果 timer 不为空，就会清除定时器，并且将 timer 清空
    if (timer) {
      clearTimeout(timer)
        timer = null
    }
    timer = setTimeout(() => fn(), wait)
  }
}

/*
 * 节流函数 throttle
 * fn 是执行的函数，gapTime 是节流的时间间隔
 */
function throttle(fn, gapTime) {
  let lastTime = null;
  return function () {
    let nowTime = + new Date()
    // 如果 lastTime 是 null，或者两次调用的时差超过了节流时间，才会执行函数
    if (!lastTime || nowTime - lastTime > gapTime) {
      fn();
      // 执行完毕后将时间同步
      lastTime = nowTime
    }
  }
}

这里我们可以看到，其实是 return 的用来操作 timer 和 lastTime 的函数就是一个闭包。

如果不理解，可以不要外层的函数，直接将 timer 和 lastTime 放在全局作用域，再去尝试理解。

总结

一言以蔽之：函数防抖和函数节流，是在时间轴上控制函数的执行次数所用的函数。

（完）