节流和防抖的再一次学习

在前端开发中，经常需要绑定一些持续触发的事件，如resize、scroll、mousemove等等，但有些时候并不希望在事件持续触发的过程中那么频繁地去执行函数。此时我们可以用防抖和节流来解决此类问题。

 

防抖(debounce）

来看一下防抖的定义：在触发事件后n秒内函数只能执行一次，如果在这n秒内事件又被触发，则重新计算函数执行时间。
顾名思义，防止抖动，以免把一次事件误认为多次，比如生活中的敲键盘。

防抖的应用场景：

• .search搜索，用户不断输入值时，用防抖来节约ajax请求，也就是输入框事件。
• 登录、发短信等按钮避免用户点击太快，以至于发送了多次请求，需要防抖；
• 调整浏览器窗口大小时，resize次数过于频繁，造成计算过多，此时需要防抖只触发一次；
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存。

防抖代码实现：

<script>
			function debounce(fn,wait){
				let timer = null;
				return function(...args){
					if(timer){
						clearTimeout(timer);
					}
					timer = setTimeout(()=>{
						fn.apply(this,args)
					},wait)
				}
			}
		</script>

防抖函数的重点在cleartimeout()。

 

节流

定义：规定一个单位时间，在这单位时间内，只能有一次触发事件的回调函数执行，如果在同一单位时间内该事件被触发多次，则只有一次生效。

节流应用场景：

1. 鼠标的点击事件，比如mousedown只能触发一次。
2. 监听滚动事件，比如是否划到底部，自动加载更多。
3. 比如游戏子弹中发射子弹的频率（1s发射1颗）
4. input框实时搜索并发送请求展示下拉列表，每秒一秒发送一次请求。

节流的代码实现：

<script>
			function throttle(fn,delay){
				var preTime = Date.now();
				return function(){
					var content = this,
					args = arguments,
					nowTime = Date.now();
				// 如果两次间隔超过了delay，则执行如下函数
				if(nowTime-preTime>=delay){
					preTime = Date.now();//更新时间
					return fn.apply(content,args);
				}
				}
			}
		</script>