前端面试中常问的防抖和节流

1. 防抖

应用场景：
（1） keyup 事件
（2）调整窗口大小

原理：假设等待时间为500ms,如果500ms之内有请求，则计时器清零重新开始计时，直到500ms之内没有请求，则执行函数。

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

}

2. 节流

应用场景：
（1）鼠标不断点击触发
（2）监听滚动事件
原理：假设等待时间为500ms，如果500ms之内有多个请求，忽视500ms之内除了第一次请求的请求，在500ms后触发回调函数执行。

function throttle(fn,wait){
	let timer=null;
	return function(...args){
		if (timer) return;
		timer=setTimeout(()=>{
			fn.apply(this,args)
			timer=null;
		},wait)
	}
}