原创力文档- 1、本文档共14页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
防抖、节流、深拷贝
事件总线
王红元coderwhy
目录
1认识防抖和节流
content
2underscore使用
3防抖函数实现优化
4节流函数实现优化
5深拷贝函数的实现
6事件总线工具实现
coderwhy认识防抖和节流函数
◼防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中
而JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；
◼防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。
◼但是很多前端开发者面对这两个功能，有点摸不着头脑：
某些开发者根本无法区分防抖和节流有什么区别（面试经常会被问到）；
某些开发者可以区分，但是不知道如何应用；
某些开发者会通过一些第三方库来使用，但是不知道内部原理，更不会编写；
◼接下来我们会一起来学习防抖和节流函数：
我们不仅仅要区分清楚防抖和节流两者的区别，也要明白在实际工作中哪些场景会用到；
并且我会带着大家一点点来编写一个自己的防抖和节流的函数，不仅理解原理，也学会自己来编写；
coderwhy认识防抖debounce函数
◼我们用一副图来理解一下它的过程：
当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
当事件密集触发时，函数的触发会被频繁的推迟；
只有等待了一段时间也没有事件触发，才会真正的执行响应函数；
防抖的应用场景很多：
➢输入框中频繁的输入内容，搜索或
者提交信息；
➢频繁的点击按钮，触发某个事件；
➢监听浏览器滚动事件，完成某些特
定操作；
➢用户缩放浏览器的resize事件；
coderwhy防抖函数的案例
◼我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容：
◼比如想要搜索一个MacBook：
当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网
络请求；
当继续输入ma时，再次发送网络请求；
那么macbook一共需要发送7次网络请求；
这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;
◼但是我们需要这么多次的网络请求吗？
不需要，正确的做法应该是在合适的情况下再发送网络请求；
比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
也就是我们应该监听用户在某个时间，比如500ms内，没
文档评论（0）