前端面试常考 | 节流与防抖

---

---

一. 防抖

1. 什么是防抖

所谓的防抖就是指连续触发事件但是在设定的一段时间内中只执行最后一次。
例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行。

2. 常见应用场景

1. 搜索框搜索输入
在我们在所搜框输入时，不能每次输入都触发一次请求，这样会非常的消耗系统性能，那么这时就可以用到防抖。
2.文本编辑器实时保存
在文本编辑器实时保存的应用场景下，不需要用户每次输入都进行一次保存，而是可以设置一个时间，多长时间后再去进行一个自动保存。

3. 代码实现思路

如果面试官问我们防抖的代码实现思路，那么我们可以回答利用定时器。
如下例子:

let timerId = null;
document.queryselector('.ipt').onkeyup= function (){
	if (timerId !=null){
	clearTimeout(timerId)
	}
	timerId = setTimeout(()=
	console.1og('我是防抖')
	},1000)
}

在我们的实际开发中除了可以自己进行手写还可以使用 lodash 进行实现，相关技术各位读者朋友可以自行查阅相关文章。

二. 节流

1. 什么是防抖

就是指连续触发事件但是在设定的一段时间内中只执行一次函数。
例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次。

2. 常见应用场景

节流的引用场景比较多常见的有：
1.高频事件例如快速点击、鼠标滑动、resize事件、scroll事件
对于这类高频的事件，我们可以设置一个时间，在设定事件内不管触发多少次事件都不会触发相应的业务逻辑代码，只有这段时间结束后再进行下一轮执行
2. 下拉加载 视屏播放记录时间
对于这一类，我们也可以设置一个时间，设定多少秒记录一次，这样就不会过多的损耗我们系统的性能。

3. 代码实现思路

如果面试官问我们防抖的代码实现思路，那么我们可以回答利用定时器。
如下例子:

let timerId = null;
document.queryselector('.ipt').onmouseover= function (){
	if (timerId !=null){
		return
	}
	timerId setTimeout(()=>{
	console.log('我是节流)
	timerId = null
   },100)
}

在开发中对于节流除了我们手写也可以使用 lodash 进行实现，相关技术各位读者朋友可以自行查阅相关文章。

三. 面试总结

1. 防抖

单位时间内，频繁触发事件，只执行最后一次。

2. 节流

单位时间内，频繁触发事件，只执行一次。