前言

概念

函数防抖（debounce）

函数节流（throttle）

常见应用场景

函数防抖的应用场景

函数节流的应用场景

实现原理

函数防抖（debounce）

函数节流（throttle）

异同比较

lodash中的 Debounce 、Throttle

如何使用 debounce

使用示例

实现

总结

前言

最近和前端的小伙伴们，在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是，想深入研究一下两者的异同。对于后端而言，函数防抖、函数节流的使用场景并不是很多。但是，对于前端使用却是很常见。常见实用场景，有滚动加载、搜索框输入、窗口大小拖拽 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中各个参数的用处。带着目的看源码会容易一些。

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）

“约见”面试官系列之常见面试题第二十一篇之函数防抖和节流（建议收藏）相关推荐

“约见”面试官系列之常见面试题第二十篇之vuex得理解（建议收藏）
一.概念 vuex是一个专为vue.js应用程序开发的状态管理模式(它采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化). 二.五大核心属性核心属性为:sta ...
“约见”面试官系列之常见面试题第十三篇之css动画效果（建议收藏）
目录 CSS动画简介第一部分:CSS Transition 1.1 基本用法 1.2 transition-delay 1.3 transition-timing-function 1.4 tran ...
“约见”面试官系列之常见面试题第五篇说说vuex登录信息（建议收藏）
此篇文章是介绍利用 vuex 储存用户登录时的相关信息的使用方法. 声明:前面部分是刚开始对vuex的接触,后面部分是学习后对vuex使用的部分优化,想直接用最新的,可以直接找到 20200819 部 ...
“约见”面试官系列之常见面试题第二十七篇之vue-router的重要属性
export default new Router({mode: 'history', //路由模式,取值为history与hashbase: '/', //打包路径,默认为/,可以修改routes: ...
“约见”面试官系列之常见面试题第二十三篇之get和post区别（建议收藏）
POST和GET是HTTP协议中最常用的两种传参方式,这里小小总结一下两者的区别,欢迎补充~! 请求方式 GET POST 参数位置 url的query中一般在content中,query也可参数 ...
“约见”面试官系列之常见面试题第十一篇之canvas（建议收藏）
目录前言介绍小试牛刀应用案例动画 API介绍 Demo 游戏三要素 Demo 截图 API介绍 canvas.style.width 和 canvas.width 的区别 Demo 合成图 ...
“约见”面试官系列之常见面试题第二十九篇之Vue和React的区别
vue与react的不同之处是什么?下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue与react,两者都为当下主流框架相同之处在于: 使用 V ...
“约见”面试官系列之常见面试题第二十八篇之vue中的混合（minix）实例理解
minix 是个什么东西, 就是混合,把你混合给我浅显表述就是你说 : '我叫李四', 我说 : '我叫张三', 然后把你混合给我, 就成了我说 : '我叫张三我叫李四', 所有解说都在例子里 ...
“约见”面试官系列之常见面试题第二十四篇之vue-router使用（建议收藏）
开发的时候有时候会遇到一种情况,比如 :点击这个链接跳转到其他组件的情况,通常会跳转到新的页面,蛋是,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用. ...

“约见”面试官系列之常见面试题第二十一篇之函数防抖和节流（建议收藏）

前言

概念

函数防抖（debounce）

函数节流（throttle）

常见应用场景

函数防抖的应用场景

函数节流的应用场景

实现原理

函数防抖（debounce）

函数节流（throttle）

异同比较

lodash中的 Debounce 、Throttle

如何使用 debounce

使用示例

实现

总结

“约见”面试官系列之常见面试题第二十一篇之函数防抖和节流（建议收藏）相关推荐

最新文章

热门文章