前端性能优化｜什么是防抖和节流？
防抖与节流、节流与防抖，是不是经常让你不知道谁是谁。
乘电梯，如果有人进入电梯（触发事件），电梯门会等待 5 秒再关闭，在等待期间如果又有人按电梯进入（在 5 秒内再次触发该事件），电梯门又要重新等待 5 秒，直到最后一个人进入电梯，电梯门在等待 5 秒后关闭。
这就是我们生活中遇见的防抖，那节流是什么呢？
打过游戏的朋友都知道，游戏当中技能的使用是有冷却时间的，就算你不停地按技能，也只能在规定时间内触发一次，这就是节流。防抖和节流是前端优化经常遇见的知识点，快拿好小板凳和我一起开启接下来的学习吧！
函数防抖（debounce)
1、原理
当持续触发事件时，在规定的时间内该事件没有被再次调用，事件处理函数就会执行一次，如果在规定时间内事件再次被调用，就重新开始计时。
2、使用场景
按钮提交场景：防止多次提交按钮，只执行最后提交的一次。
搜索框的联想词：只发送最后一次输入结果的请求。
进行窗口的 resize、scroll 事件时: 只计算最后一次结果进行执行。
输入框内容的校验：只进行最后一次输入的内容校验。
3、实现
用 immediate 参数控制函数是否立即执行。如果函数是立即执行的，就立即调用；如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦开始一个定时器，只要定时器还在，每次触发函数都会重新计时。一旦事件不触发了，定时器时间到，执行一次事件函数，定时器重置为 null，就可以再次点击了。
函数节流（throttle）
1、原理
当持续触发事件时，保证在规定的时间内调用一次事件处理函数。如果这个单位时间内触发多次函数，只有一次有效。
2、使用场景
DOM 元素的拖拽功能实现: 一个时间周期去获取一次位置并计算，防止超高频次触发位置变动。进行窗口的 resize、scorll 事件时: 只计算最后一次结果进行执行。
3、实现
时间戳方式：当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳；如果小于，就不执行。该方式第一次事件立即执行，最后一次事件不执行。
定时器方式：当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行完，然后执行函数，清空定时器，这样就可以设置下个定时器。该方式第一次事件不立即执行，最后一次事件执行。
时间戳 + 定时器方式: 用函数参数实现配置项（leading：boolean、trailing：boolean），控制事件第一次是否立即触发和事件最后一次是否触发。
总结
函数防抖：
将几次操作合并为一次操作进行。原理是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
函数节流：
使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
两者的区别：
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
作者
青云科技平台及服务部 林茂
福利时刻
关注“青云技术社区”公众号，添加“青仔”微信 qingcloud-community，加入技术交流群，就有机会获得价值 139 元《JavaScript 权威指南 （原书第 7 版）》。
奖品介绍
“犀牛书”已经成为 JavaScript 程序员心中公认的权威指南。凭着完整的内容、细致的讲解以及海量针对性的示例而受到读者的一致好评，这本巨著主要讲述的内容涵盖 JavaScript 语言本身，以及 Web 浏览器所实现的 JavaScriptAPI。
抽奖说明
奖品：技术图书《JavaScript 权威指南 （原书第 7 版）》 2 本
活动时间：即日起至 2021 年 8 月 11 日 16:00 活动自动开奖后，请于 48 小时内联系“青仔”微信 qingcloud-community，留下领奖信息。
版权声明: 本文为 InfoQ 作者【青云技术社区】的原创文章。
原文链接:【http://xie.infoq.cn/article/46be0adca5d5fed65d0e63719】。文章转载请联系作者。
还未添加个人签名 2021.01.23 加入
还未添加个人简介
评论