防抖和节流

JS中浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress这些事件触发时，会不断调用绑定在事件上的回调函数，极大浪费资源，降低前端性能，即可使用防抖节流来防止上述问题

防抖

一定时间后再执行，以免多次连续触发，防止抖动

防抖场景：

• 登录、发送短信等按钮避免用户点击太快而出现多次请求
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多
• 文本编辑器实时保存，在无操作后一段时间进行保存

简单实现代码：

function debounce(func,wait){
	var timeout;  //维护一个延时时间变量
	return ()=>{    //使用闭包返回一个函数并且共同使用timeout变量
		var that = this
		clearTimeout(timeout);  //若在wait的时间内被触发，清空计时器，重新计时
		timeout = setTimeout(()=>{
			func.apply(that)
		},wait);
	}
}

节流

立即执行，之后的一段时间后不再执行，控制事件发生的频率，与服务器及网关控制和限流类似

• scroll事件，每隔一秒计算一次页面位置信息
• 浏览器播放事件，每隔一秒计算一次进度信息
• input框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求（也可防抖）

简易实现

function throttle(){
	var timeout;
	return ()=>{
		let that = this;
		if(tiemout) return;   //一定时间内不予触发
		timeout  = setTimeout(()=>{
			func.apply(that);
			timeout = null;  //执行完后清空timeout
		},wait)
	}
}