【JS】浅谈防抖与节流

前言

防抖与节流算是面试题常问的一题。各个博客也经常拿电梯举例，再回顾一下。

防抖：假设你进入一部电梯，当你按某个楼层，电梯10秒关一次门，正要关闭的时候。另外的人又按了开门的按钮后进入电梯，此时电梯门又要等10秒中关闭。直到没有人按开门按钮，最后的关闭按钮才会关门。

节流：我们上下班经常坐地铁，我们知道每到一站会有个15秒上下客时间，超过15秒地铁门就会关闭，坐不上和坐过站的都只能等下一辆地铁。

---

一、防抖

1.1是什么？

上面举了电梯的例子，总结一下防抖就是：
当触发后再次触发，会取消上一次触发的执行，直到最后一次触发后过去设定时间后才执行。

1.2做什么？

经常优化的时候会用，比如按钮输入框的输入。优化高频率执行的代码，控制函数的执行频率，从而避免资源浪费，提高程序性能。

1.3应用场景？

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

1.4实现原理？

我们已知对于频繁触发的会在一段时间内，清除上一次触发的执行之后，再重新开始下一次的执行，直到最后一次执行。

function debounce(fn, interval = 300) {
  let timeout = null;

  return function () {
  //前一个setTimeout清除掉
    clearTimeout(timeout);
  //重新生成新的setTimeout，在这个时间内还有操作，fn则不执行
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}

二、节流是什么？

2.1是什么？

上面举了地铁的例子，总结一下防抖就是：
触发后立即执行，但如果要执行下一次，需要在离上次执行时间间隔设定时间后再出发才能执行。

2.2做什么？

经常优化的时候会用，比如鼠标滚轮。优化高频率执行的代码，控制函数的执行频率，从而避免资源浪费，提高程序性能。

2.3应用场景？

• 动画场景：避免短时间内多次触发动画引起性能问题
• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动（mousemove）
• 缩放场景：监控浏览器窗口大小（resize）
• 滚轮场景：鼠标滚轮事件（wheel）
• Canvas 画笔功能

2.4实现原理？

function throttled(fn, delay) {
    let timer = null
    let starttime = Date.now()
    return function () {
        let curTime = Date.now() // 当前时间
        let remaining  = delay - (curTime - starttime)  // 从上一次到现在，还剩下多少多余时间
        clearTimeout(timer)
        //进入下一次执行
        if (remaining <= 0) {
            fn.apply(this, arguments)
            starttime = Date.now()
        } else {
            timer = setTimeout(fn, remaining);
        }
    }
}

总结

防抖: 执行最后一次
节流：每隔一段时间执行一次

共同点：优化高频率执行的代码，通过降低回调函数的执行频率，从而避免资源浪费