1.防抖:
就是指连续触发事件但是在设定一段时间内中只执行最后一次。
例如:
设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又触发了事件,那就会重新开始1000毫秒之后再执行
- 记忆核心:从新开始
1.1、防抖应用场景:
- 搜索框搜索输入
这个是比较典型的案例。在我们输入搜索框的时候,我们不能每次进行输入的时候都要去发送请求,再返回我们数据,会非常的繁琐,那我们这可以设定一个时间,在我们多少秒之后呢再发送请求,所以呢频次不要太高 - 文本编辑器实时保存
这个也是没有必要每次输入都要保存,而是设定一个时间,多少时间之后呢再自动保存
1.2、防抖代码实现思路?
回答:利用定时器定时器基本靠谱了
let timerId=null
// 首先把定时器声明为null
document.querySelector('.ipt').onKeyup=function(){
//onkeyup键盘抬起事件
//防抖
if(timerId !==null){
clearTimeout(timerId)
}
//键盘抬起的时候我们先来判断是不是null,如果不是null我就清除定时器
//首次执行这个条件是不满足的,所以不清除定时器,执行下面代码
timerId =setTimeout(()=>{
console.log('我是防抖')
},1000)
//定时器一旦执行,就会返回给我们一个数字,所以timerId就有数字了
//1.如果此时你又做了一次键盘的抬起事件,
//2.因为定时器timerId不是null,那么就先清除定时器
//3.清除完毕又执行这段代码
}
2.节流:
就是指连续触发事件但是在设定的一顿时间内只执行一次函数。
例如:
设定1000毫秒执行,那你在1000毫秒触发再多次,也只在1000毫秒后执行一次
记忆方法
- 记忆核心:不要打断我
2.1、节流应用场景:
- 高频事件 例如 快速点击、鼠标滑动、resize事件、scroll事件
- 下拉加载
- 视频播放记录时间等
2.2、节流代码实现思路?
回答:利用定时器定时器基本靠谱了
let timerId=null
// 首先把定时器声明为null
document.querySelector('.ipt').onmouseover=function(){
//onmouseover鼠标经过事件
//节流
if(timerId !==null){
return
}
//首次执行timerId为空,这个条件是不满足的
//所以不执行return,执行下面代码
timerId =setTimeout(()=>{
console.log('我是节流')
timerId=null
},100)
//定时器一旦执行,就会返回给我们一个数字,所以timerId就有数字了
//但是这段代码是在100毫秒之后才去执行代码块
//如果是在100毫秒之内再次做了一个鼠标事件
//我再次触发事件,timerId已经做了变化
//if条件就满足了,return结束我们这个函数,
}
### 总结
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
![](https://img-blog.csdnimg.cn/img_convert/d74f8b42f4a63c76b18efc6a818147df.png)
![](https://img-blog.csdnimg.cn/img_convert/6deb905d9655a3f0f54b8920686e1970.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)
**JavaScript**
![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)
**性能**
![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)
**linux**
![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)