防抖与节流

本质上防抖和节流都是优化高频率执行代码的一种手法
如浏览器的resize、scroll、mousemove、keypress等事件在触发时，会不断的调用绑定在事件上的回调函数，极大的浪费资源，降低前端性能
为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（节流）和debounce（防抖）的方式来减少调用频率

节流：n秒内只运行一次，若n秒内重复触发，只有一次执行

//节流  简单的代码实现
//回调函数 以及时间
	function throttle(fn,delay){
		let timerId;
		return function(...args){
			if(!timerId){
				timerId = setTimeout(()=>{
					fn.apply(this,args);
					timerId = null;
				})
			}
		}
	}

	document.onscroll = throttle(function(){
		console.log('scroll事件被触发了'+Date.now())
	},1000)

防抖：n秒后在执行该事件，若在n秒内被重复触发，则重新计时

//防抖
function debounce(fn,delay){
	let timerId;
	return function(...args){
		timerId && clearTimeout(timerId);
		timerId = setTimeout(()=>{
			fn.call(this,args);
		},1000)
	}
}
document.getElementById('btn').onclick = debounce(function(){
	console.log('点击事件触发'+Date.now())
},500)

相同点：1.都可以通过使用setTimeout实现，目的都是降低回调执行频率，节省计算资源。
不同点：
1.函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次。
2.函数防抖关注一定时间连续触发的事件，只在最后一次执行一次，而函数节流一段时间内只执行一次
应用场景：
防抖触发场景：
搜索框搜索输入，只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
节流触发场景：
滚动加载，加载更多或滚到底部监听
搜索框，搜索联想功能