关于防抖与节流的总结

1. 防抖

• 防抖的概念
  在触发某一个事件的时候，例如点击提交按钮，我们很可能因为手抖在很短很短的时间内连续点击了两次按钮，那么这个时候提交给后端的数据就会变为两条（我亲身遇到过），这是不应该出现的情形。
  防抖就是为了防止手抖，当短时间内多次点击触发的时候，只执行一次函数。防抖的关键就是setTimeOut定时器，控制在规定时间后执行我们的代码。

  具体代码如下，这里还用到了闭包：

	function debounce(fn,time){  //防抖函数
		let timeId = null  //定时器的id，定时任务完成后用来清除定时器
		return function (){
			if(timeId)clearTimeout(timeId)   //如果已经有定时器存在，就先清除掉，再创建定时器
			timeId = setTimeout(fn,time)   //fn为我们要执行的代码，time为延时时间
		}
	}
	function fun(){
		console.log(123)
	}
	function clickEvent(){   //点击事件
		debounce(fun,1000)  //调用防抖函数
	}

当我们点击按钮触发clickEvent()点击事件时，会在一秒后输出“123”，当我们连续点击，并不会输出多个123，此时防抖的目的已达到。

2. 节流

• 节流的概念
  防抖设置了一个定时器来控制函数在规定时间内只能执行一次，如果重复激活，那就重新计时，那么就会有一个问题，如果有人不停的点击按钮，那么函数就永远不会执行，此时就需要通过节流函数来实现。节流就相当于水龙头放水，有一个阀门来控制它打开或者关闭。效果就是如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

这里有两种实现思路，我会将它全部的详细的写出来。

• 第一种：使用setTimeout定时器，再加一个变量来充当阀门，控制水龙头开还是关。实现代码如下：

	function throttle(fn,time){
		let flag = true   //打开阀门
		return function (){
			if(!flag){
				return false   //如果阀门是关闭的，则不再执行后面的代码
			}   
// 如果阀门是开的，则先关闭阀门，再创建一个定时器，在规定时间后执行我们的代码，并且打开阀门方便下一次可以执行
			flag = false
	        let timeId = setTimeout(() => {
	            fn()
	            flag = true;
	            clearTimeout(timeId)
	        }, time)
			}
	}
	function fun(){
		console.log(123)
	}
	function clickEvent(){   //点击事件
		throttle(fun,1000)  //调用节流函数
	}

此时不停的触发点击事件，则会在1s后输出‘123’，然后不停的点击，还是会在1s后输出‘123’，以1s为间隔不停的输出。

• 第二种：还是用setTimeout定时器，不过不自己定义阀门，用定时器的id作为阀门来控制，存在定时器就是关闭状态，不存在就是打开状态。代码如下：

	function throttle(fn,time){
		return function (){
			if(timeId){
				return false   //如果定时器存在，则不再执行后面的代码
			}   
// 如果定时器不存在，则创建一个定时器，在规定时间后执行我们的代码，并且清除定时器打开阀门方便下一次可以执行
	        let timeId = setTimeout(() => {
		            fn()
		            clearTimeout(timeId)
		        }, time)
	}
	function fun(){
		console.log(123)
	}
	function clickEvent(){   //点击事件
		throttle(fun,1000)  //调用节流函数
	}

• 使用场景：在用户使用输入框搜索的时候可以用到节流；页面滚动事件一般会用到防抖；频繁操作例如点赞和取消点赞，因此需要获取最后一次操作结果。

这里是我的一点小总结，主要参考文章是链接，如有不对的地方，欢迎留言评论指正！