对JS中的防抖（debounce）和节流（throttling）的一些理解（结合实例）

1.防抖（debounce）:遇到延时函数的定时器，就重新计时
(1)策略：
当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。
在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。
(2)特点：
[1]当事件快速连续不断触发时，动作只会执行一次。
[2]延迟debounce，是在周期结束时执行。
[3]前缘debounce，是在周期开始时执行。
[4]当触发有间段，且间段大于我们设定的时间间隔，动作就会有多次触发。
(3)通过袖珍版的防抖函数理解其实现吧

//func是用户传入需要防抖的函数
//wait是等待的时间
const debounce = (func,wait = 50)=>{
	//缓存一个定时器id
	let timer = 0;
	//这里返回的的是每次用户实际调用的防抖函数。
	//如果已经设定过定时器，就清空上一轮的定时器，开始一个新的定时器，延迟执行用户传入的方法。
	return function(...args){
		if(timer) clearTimeout(timer)
		timer = setTimeout(()=>{
			func.apply(this,args)
		},wait)
	}
}

这是一个简单的防抖，有缺陷，这个防抖是延迟版的防抖，只能用在最后调用，一般的防抖会有立即执行的选项，immediate选项。
(4)立即调用以及延时调用的区别：
[1]例如在搜索引擎搜索问题时，希望用户输入完最后一个字才调用查询接口，这个时候就用延迟调用的函数，在一连串（间隔小于wait的）函数触发后调用。
[2]用户给interview Map点star的时候，我们希望用户点第一下的时候就去调用接口，并且成功之后改变star按钮的样子，用户就立马可以得到反馈，是否star成功了，这个情况试用立即执行的防抖函数，在总是在第一次调用，且下一次调用前必须与前一次调用的时间间隔大于wait才会触发。
(5)立即调用的防抖函数

//防抖函数，返回函数连续调用时，空闲时间必须大于或等于wait.func才会执行。
function debounce(func,wait = 50,immediate = true){  //immediate为true表示立即执行。为false表示延迟之后在执行。
	let = timer,context,args
	const later = () =>setTimeout(()=>{  //延迟函数
		timer = null;  //延迟函数执行完毕，清空缓存的定时器序号
		if(!immediate){  //延迟执行的情况下，函数会在延迟函数中执行
			func.apply(context,args)  //使用之前缓存的参数和上下文
			context = args = null;
		}
	},wait)
	return function(...params){  //返回的是每次实际调用的函数
		if(!timer){  //没有创建的延迟函数，就创建一个
			timer = later();
			if(immediate){  //立即执行，调用函数
				func.apply(this,params)
			}
			else{  //延迟执行，缓存函数，调用上下文
				context = this;
				args = params
			}
		}
		else{  //已有延迟函数，清除并重新设定
			clearTimeout(timer)
			timer = later()
		}
	}
}

总结：
(1)对于按钮防点击来说的实现：如果函数是立即执行的，就立即执行调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行，一旦开始一个定时器，只要定时器还存在，每一次点击都会重新计时，定时器时间到，重置为null，就可以再次点击了。
(2)对于延时执行的函数来说的实现：清除定时器id，如果是延时调用就调用函数。
2.节流（throttling）：有延时函数定时器，就不执行任何操作
(1)策略：
固定周期内，只执行一次动作，若没有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。
节流也分为前缘和延迟两种：
前缘：先执行，后开始周期。
延迟：周期执行后，再执行。
(2)特点：
连续高频触发事件时，动作会被定期执行，响应平滑
(3)通过例子加深理解：

//节流函数，返回函数连续调用时，func执行频率为wait/次。
function throttle(func,wait = 50,immediate = true){  //immediate为true表示立即执行。为false表示延迟之后在执行。
	let = timer,context,args
	const later = () =>setTimeout(()=>{  //延迟函数
		if(!immediate){  //延迟执行的情况下，函数会在延迟函数中执行
			func.apply(context,args)  //使用之前缓存的参数和上下文
			context = args = null;
			clearTimeout(timer);  //清除定时器
			timer = null;  //延迟函数执行完毕，清空缓存的定时器序号
		}
	},wait)
	return function(...params){  //返回的是每次实际调用的函数
		if(!timer){  //没有创建的延迟函数，就创建一个
			if(immediate){  //立即执行，调用函数
				func.apply(this,params)
			}
			 //如果不是立即执行函数或者刚调用完函数，缓存函数，调用上下文
				context = this;
				args = params
				later();
		}
	}
}