什么是节流函数以及防抖函数？

上次在知乎上看到了一篇文章，在此自己靠着记忆以及以前的笔记 回忆下开发流程。如有不足，欢迎指正 。以此共勉！！

前记：

记得有次项目开发中，我们老大说 登陆按钮如果我一直点击，你的login接口请求了多次，这个影响性能，不行吧。你处理下 明天争取解决了 。因为我们做的是产品 所以工作不急 你懂的。。。 后面我在想 既然不让他一直点击登陆 那我能不能 定一个flage 初始化false 点击登陆的时候设置为true 当接口返回数据后 赋值为false 并且flage ==true的时候 设置登陆按钮 readonly 然后就着手开发了 亲测还行 嘿嘿 。 然而 有一天 我做了另一个功能 给一个div设置可以拖拽大小的功能。当大小变化的时候 触发一个初始化echarts的函数。卧槽 开发的时候遇到一个大问题。浏览器echarts初始化时候图形一直抖动。最后console 一下 初始化方法触发了很多次 。。。。。妹的 这怎么办。当时是个前端小白 （今天也是个 妹的）然后问我们老大 自己解决不了 结果被他说了一顿 ‘不会问度娘 娘不行就去问哥（google ）’ 好吧 当时我都不知道在网上该怎么表达遇到的这种情况。然后乱搜索啊‘怎样约束一个方法不触发多次？’无意间看到一句话‘Debounce 和 Throttle 的原理及实现’点开一看 哎呦 老天开眼啊 这不是我要的东西吗 ！？

正题：

专门上网上翻译了下

防反跳 也就是说在一定时间里 只能执行一个方法 如果触发多个方法 那么多个方法会合并成一个 结果只执行一个 嗯 是这样的。那么肯定要向setTimeout函数封装的一样 setTimeout（fn,timeout）这个模仿它应该是 debouce(fn,timeout) 那么这个fn应该怎么写呢？

那就直接上代码吧：

/*fn 执行的方法timeout 延迟的时间
*/function debouce(fn, timeout) {var time;return function() {var _this = this;var args = arguments；clearTimeout(timer);time = setTimeout(() => {fn.apply(_this, args);}, timeout);}}
复制代码

解释一下：

调用debouce 入参两个变量，结果 返回一个方法 。通过程序可以知道： 当连续触发四次方法的时候，返回四个方法 因为闭包的原因 程序执行完后并不会回收内存 那么time 还是被定义的 存在的。这时候执行第一个方法 var time; 而time本来就是undefined ， clearTimeout(timer); 没个卵用 然后接着往下走，time被赋值 。当执行第二个方法的时候，clearTimeout(timer); 结果time又被清空了 。然后走第三个方法 clearTimeout(timer); 也没个卵用 因为第二个方法已经清空了它。往下走 time被赋值。当第四个方法执行的时候，clearTimeout(timer)清空第三个方法赋的值 然后接着走 第四次time被重新赋值。整个下来 time是在第四次方法调用的时候赋的值才没有被清空。然后 timeout时间到了 制动执行该fn.

且只执行一次。

总结：关键是对闭包的理解。

有个高大上的名字：函数节流 。 这个起名字的真是个大神

节流：即函数以匀速的频率来执行

闲话少数 直接上代码：

function throttle(fn, timeout = 250) {var last;var timer;
return function() {var _this = this; //上下文环境var args = arguments; //var now = +new Date(); //获取当前时间戳
if (last && last + timeout > now) { //last + threshhold > now 说明延迟时间timeout 还没到clearTimeout(timer);timer = setTimeout(function() {last = now;fn.apply(_this, args)}, timeout)} else {last = now;fn.apply(_this, args);}}}
复制代码

总的来说 就是比debouce 多了个时间范围判断 说明已在代码注释上。

总结:

debounce 强制函数在某段时间内只执行一次，throttle 强制函数以固定的速率执行。

throttle 常用的场景是限制 resize 和 scroll 的触发频率。而其他解决触发多次方法可以使用debounce。如mouseover mouvemove keyup 等。

备注：文章有些是以前的学习笔记，直接拷贝上来的。侵删！