前端提升（7）

导航

只要我发表的足够快，正确答案就追不上我。

函数防抖和函数节流

函数防抖（debounce）音译：弟吧安丝

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，
则会终止前一次，重新计算函数执行时间。
比如你三秒一次，但你又想延时，于是两秒就停一下，一个小时之内，你只执行了一次。爽哎！

应用场景：
连续的事件，只需触发一次回调的场景有

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流（throttle）音译：丝rua掏

限制一个函数在一定时间内只能执行一次。比如小四一天只能布置一次三道面试题，多了就有人骂他。

应用场景：
间隔一段时间执行一次回调的场景有

滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

什么是事件委托？为什么要用事件委托？

四哥这厮，虽然只出了事件委托，但是绝对会问到事件冒泡。

把上图想象成4个box，从上到下依次被套，每个元素都有一个点击事件，点击时会在控制台显示：我是div/body/document/window中的一个。

事件冒泡：先执行子元素的事件，再执行父元素的事件。像穿衣服，当你穿上内衣时会大喊一句“ 我穿内衣了”，穿上衬衫时会大喊“ 我穿上衬衫了”，穿上外套时就会被别人捂住嘴一样。

事件捕获：先执行父元素的事件，再执行子元素的事件。像你让我帮忙，我忙，让你等我忙完。

事件委托：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！就像你不会敲代码，大喊一声张钧，你爹就会过来帮你。

事件委托的使用场景：比如一堆li，点击他们会弹出来它们的innerHTML，一个一个添加点击事件肯定不行，所以给ul加一个点击事件，利用事件源event，就可以获取到每个li的内容。

事件委托的优点：

1. 减少内存占用，性能更优，不麻烦
2. 动态创建的DOM依然具有事件

原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){}) 有什么不同？

1.执行时间： window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同： window.onload不能同时编写多个，如果有多个 window.onload 方法，只会执 行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法： window.onload没有简化写法 $(document).ready(function())可以简写成$(function(){})；

另外：由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完，例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，这时候就有可能出现这两天常提的swiper问题。