函数防抖与节流 - js

防抖（debounce）和节流（throttle）是在 高频次调用函数 的场景下，常用的解决方案了。故名思意，可以节省开销，优化体验。

---

二者的区别：

防抖：

我们让想要执行的函数只在最后一次调用完一小段时间后执行对应函数。一连串动作结束后，执行 一次。

节流：

我们让想要执行的函数不管调用多频繁，都隔一小段时间执行一次。一连串动作中，固定 隔一阵子执行一次。

---

实现的原理其实都还是定时器 setTimeout，实现步骤也很简单，代码贴在下面：

 1 // 防抖
 2 function debounce(fn, delay = 500) {
 3   let timer = null;
 4   return function (...params) {
 5     if (timer) {
 6       clearTimeout(timer);
 7     }
 8     timer = setTimeout(() => {
 9       fn.apply(this, params)
10       timer = null
11     }, delay)
12   }
13 }
14 // 节流
15 function throttle(fn, delay = 500) {
16   let timer = null;
17   return function (...params) {
18     if (timer) {
19       return;
20     }
21     timer = window.setTimeout(() => {
22       fn.apply(this, params);
23       timer = null;
24     }, delay);
25   }
26 }

调用时只需要对想执行的函数外面包一层就行了，例如滚动条改变监听事件：

1 window.addEventListener('scroll', debounce(function (e) {
2   console.log(document.documentElement.scrollTop);
3 }, 300));

第一个参数是执行函数，第二个参数是限制时间。

---