面试题(7)函数防抖和函数节流,什么是事件委托为什么要用事件委托,原生中的window. onload和jQuery中的 ready函数 $(function(){})

函数防抖和函数节流

  • 函数防抖
    函数防抖:就是当你触发事件后在n秒内函数只能执行一次,如果n秒后又触发了事件,就会终止 前一次,重新计算函数执行时间

打个比方,坐公交,司机需要等最后一个人进入才能关门。每次进入一个人,司机就会多等待几 秒再关门

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

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

  • 函数节流
    函数节流:限制一个函数在规定时间内执行,只能执行一次

举个例子,乘坐地铁,过闸机时,每个人进入后3秒后门关闭,等待下一个人进入。

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

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

函数防抖和函数节流实例

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

1.事件委托:利用事件冒泡的原理,让自己本身所触发的事件赋给了父元素代替执行
2.为什么要用事件委托:好比父级ul下有3个li子级,只需要把点击事件赋给父级,li就会普及点击事件,不管添加多少li。
事件委托详细文章

1.事件冒泡:事件冒泡的机制是逐级向上传播
2.事件捕获:逐级向下传播
事件冒泡和事件捕获

原生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())可以简写成 (document).ready(function(){})可以简写成(document).ready(function())可以简写成(function(){});

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

详细描述

你可能感兴趣的:(面试题(7)函数防抖和函数节流,什么是事件委托为什么要用事件委托,原生中的window. onload和jQuery中的 ready函数 $(function(){}))