共计 2079 个字符，预计需要花费 6 分钟才能阅读完成。
明天听共事分享最近写的代码模块，提到了一个名词，_函数节流_
这个词真是相熟而又生疏的词，上一次看到还是在网上各种风行的前端面试宝典中.
过后我看到这个就像看到蒙娜丽莎的微笑一样神秘而难以推敲，我果决的跳过了这个题.
没想到时隔半年在我的项目里看到了共事写了.
想想差距进去素来都不是不经意的（菜鸡感叹），兴许就是当你看到这篇文章又棘手划走的时候.
于是我乘着闲暇去看了以这到底是是什么，有什么用，在什么场景下应用，如何应用，它的实现原理是什么.
这一次肯定要把它钻研得明明白白的.
函数节流还有一个孪生兄弟叫做 函数防抖
它两的呈现都是为了 _优化高频率执行 js 代码_.
比如说 js 中有的一些事件浏览器的 resize、scroll，鼠标的mousemove、mouseover 和input的 keypress 事件在触发时候都会
一直的调用绑定在事件上的回调函数
这样就是浪费资源，升高性能。所以为了优化体验，就须要对这些事件调用的次数做 限度。
概念
函数节流是什么？
每隔一段时间，只执行一次函数
限度了函数再肯定工夫只能执行一次
就像坐地铁，过闸机时，每个人进入后 3 秒敞开，能力等下一个人进入
函数防抖
在触发事件的 n 秒后函数才会被执行，如果 n 秒内又触发了事件，则会从新从新计算函数执行的工夫
简略的说就是一个动作间断触发时，只有最初一次无效。
就像坐公交，司机会等最初一个人上来再关门，每进一个人就会多期待几秒。
原理
如何实现函数节流
函数节流实现的原理是定时器通过定时工作提早办法的执行，在延时工夫内若是办法被触发，就是退出办法，从而实现函数在一段时间内只能执行一次。
- 函数节流的 setTimeout 版 简略实现
const _.throttle = (func, wait) => {
let timer;
return () => {if (timer) {return;}
timer = setTimeout(() => {func();
timer = null;
}, wait);
};
};函数节流的目标，是为了限度函数一段时间内只能执行一次
因而，通过应用定时工作，延时办法执行。在延时的工夫内，办法若被触发，则间接退出办法。从而，实现函数一段时间内只执行一次
- 函数节流的 工夫戳版 简略实现
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();}
};
};其实现原理，通过比对上一次执行工夫与本次执行工夫的时间差与间隔时间的大小关系，来判断是否执行函数。
若时间差大于间隔时间，则立即执行一次函数。并更新上一次执行工夫。
如何是实现函数防抖
const _.debounce = (func, wait) => {
let timer;
return () => {clearTimeout(timer);
timer = setTimeout(func, wait);
};
};函数防抖在执行指标办法时，会期待一段时间。当又执行雷同办法时，若前一个定时工作未执行完，则 clear 掉定时工作，从新定时。
利用场景
函数节流罕用在须要间隔时间执行一次回调的场景
- 滚动加载的底部监听，加载更多
- 搜寻框的联想性能
- 避免按钮反复点击，屡次提交表单
函数防抖罕用在间断的事件但只须要触发一次的场景
- 搜寻框输出，只须要用户输完再发送申请
- 手机号和邮箱的输出查看
- 窗口大小 resize，只须要窗口调整实现之后再计算大小
lodash 中的 Debounce、Throttle
当然函数防抖和函数节流那么有用，在 lodash 里曾经有封装好的办法能够间接应用了。
函数节流（throttle)
_.throttle(func, [wait=0], [options=])
func (Function): 要节流的函数。[wait=0] (number): 须要节流的毫秒。[options=] (Object): 选项对象。[options.leading=true] (boolean): 指定调用在节流开始前。[options.trailing=true] (boolean): 指定调用在节流完结后。如下理论应用示例：
import {throttle} from 'lodash'
const THROTTLE_TIME = 300
onClick={throttle(onDownload, THROTTLE_TIME)}函数防抖(debounce)
_.debounce(func, [wait=0], [options=])
func (Function): 要防抖动的函数。[wait=0] (number): 须要提早的毫秒数。[options=] (Object): 选项对象。[options.leading=false] (boolean): 指定在提早开始前调用。[options.maxWait] (number): 设置 func 容许被提早的最大值。[options.trailing=true] (boolean): 指定在提早完结后调用。
