JS函数的防抖和节流

前言

最近和前端的小伙伴们，在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是，想深入研究一下两者的异同。对于后端而言，函数防抖、函数节流的使用场景并不是很多。但是，对于前端使用却是很常见。常见实用场景，有滚动加载、搜索框输入、窗口大小拖拽 Resize。

概念

函数防抖（debounce）

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

简单的说，当一个动作连续触发，则只执行最后一次。

打个比方，坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。

函数节流（throttle）

限制一个函数在一定时间内只能执行一次。

举个例子，乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。

为了方便理解，我们首先通过一个可视化的工具，感受一下三种环境（正常情况、函数防抖情况 debounce、函数节流 throttle）下，对于mousemove事件回调的执行情况。

 

三种环境下，mousemove事件执行分布图

竖线的疏密代表事件执行的频繁程度。可以看到，正常情况下，竖线非常密集，函数执行的很频繁。而debounce（函数防抖）则很稀疏，只有当鼠标停止移动时才会执行一次。throttle（函数节流）分布的较为均已，每过一段时间就会执行一次。

常见应用场景

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

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

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

实现原理

函数防抖（debounce）

函数防抖的简单实现：

const _.debounce = (func, wait) => {
  let timer;

  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  };
};

函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。

函数节流（throttle）

1）函数节流的 setTimeout 版简单实现

const _.throttle = (func, wait) => {
  let timer;

  return () => {
    if (timer) {
      return;
    }

    timer = setTimeout(() => {
      func();
      timer = null;
    }, wait);
  };
};

函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。

2）函数节流的时间戳版简单实现
根据函数节流的原理，我们也可以不依赖 setTimeout实现函数节流。

const throttle = (func, wait) => {
  let last = 0;
  return () => {
    const current_time = +new Date();
    if (current_time - last > wait) {
      func.apply(this, arguments);
      last = +new Date();
    }
  };
};

其实现原理，通过比对上一次执行时间与本次执行时间的时间差与间隔时间的大小关系，来判断是否执行函数。若时间差大于间隔时间，则立刻执行一次函数。并更新上一次执行时间。

异同比较

相同点：

• 都可以通过使用 setTimeout 实现。
• 目的都是，降低回调执行频率。节省计算资源。

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
• 函数防抖关注一定时间连续触发，只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

lodash中的 Debounce 、Throttle

最后讨论一下 lodash中 debounce的使用和源码浅析。之所以分析 debounce，是因为在lodash中，throttle 是基于 debounce 实现的。如果能理解了 debounce的实现，也就能快速掌握 throttle。

如何使用 debounce

首先，看一下 debounce 的API。需要注意的是，API中的第三个参数 options。一共有3个属性，分别是 leading、maxWait、trailing。含义分别是在开始之前调用、最大等待时间、在延迟后调用。

leading与 trailing的区别，一个是在等待前被调用，一个是等待后被调用。我们上文中，提到的 debounce 的简单实现，都是等待后被调用。lodash 中默认（trailing: true）的也为等待后被调用。

/**
 * 创建一个会在 `wait` 毫秒后调用 `func` 的防抖动函数。
 * 最后一次传入 `func` 参数会传给防抖动函数，随后调用的防抖动函数返回是最后一次 func 调用的结果。
 * 防抖动函数提供 cancel 方法来取消延迟的函数调用 以及 flush 方法来立即执行函数调用。
 *
 * 注意: 如果 leading 和 trailing 都设定为 true，则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。
 * 
 * @param {Function} func 要防抖动的函数
 * @param {number} [wait=0] 需要延迟的毫秒数
 * @param {Object} [options={}] 选项对象
 * @param {boolean} [options.leading=false] 指定调用在延迟开始前
 * @param {number} [options.maxWait] 设置 `func` 允许被延迟的最大值
 * @param {boolean} [options.trailing=true] 指定调用在延迟结束后
 * @returns {Function} 返回一个具有防抖动功能的函数
 */

_.debounce(func, [wait=0], [options])

使用示例

// 正确的用法
$(window).on('scroll', _.debounce(doSomething, 200));

// 错误的用法
// 会导致多次调用debounce
$(window).on('scroll', function() {
   _.debounce(doSomething, 300); 
});

// 点击后立即执行 sendMail
$('.btn').on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));

// `batchLog` 调用1次之后，1秒内会被触发。
const debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });

实现

推荐先粗略阅读 lodash源码，若难度较大，可以参考这篇博文——聊聊lodash的debounce实现，以及作者的 debounce 简单实现。
54行实现 debounce 和 throttle，虽然功能不如 lodash 强大，但是非常适合理解 debounce的实现。

在理解 debounce 实现原理上（若不理解，可以返回阅读上文中——函数防抖的简单实现），主要从三个功能点理解：

• leading 功能的实现
• maxWait 功能的实现
• trailing 控制

总结

最后，总结一下函数防抖与函数节流的区别。函数防抖，将多次执行的事件合并成一次。函数节流，保持一段时间执行一次。推荐阅读「涂鸦码龙」翻译的这篇 - 实例解析防抖动（Debouncing）和节流阀（Throttling），加深理解。文章丰富的实例，可深刻感受一下两者的区别。

在不是很理解 debounce的API的情况下，直接阅读lodash源码，花了2个晚上看得懂云里雾里。后面，重新阅读API文档，弄明白了 leading 和 trailing的目的。很快就看懂了 debounce的源码。因此，建议阅读源码前，先理解API中各个参数的用处。带着目的看源码会容易一些。

作者：youthcity
链接：https://www.jianshu.com/p/f9f6b637fd6c
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

 数个月之前，在一次前端的性能优化中，接触到了JS中防抖和节流，一开始还不明白他们的应用在哪里，可后来才知道，这是前端中最基础的性能优化，在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。尤其是在涉及与后端的交互中，前端依赖于某种事件如resize，scroll，发送Http请求，在这个过程中，如果不做防抖处理，那么在事件触发的一瞬间，会有很多个请求发过去，增加了服务端的压力。今天又接触到一个项目，里面的响应式做的非常到位，同时性能优化做的非常好，所以想把JS的防抖和节流做一个总结。（大佬不喜勿喷）

一、函数防抖（debounce）
         当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

下面通过一段代码来演示一个防抖的例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 5000px;
}
</style>
</head>
<body>
<script>
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
</script>
</body>
</html>

大概的效果就是这个样子： 

这是我自己的运行结果：

 
二、函数节流（throttle）
        当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

时间戳方案 

var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
定时器方案 
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
 时间戳+定时器
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

效果如下：

三、总结
函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。