js中的防抖和节流

1、函数防抖（debounce）

当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间

防抖的意思是无论你触发多少次函数，只会触发最后一次函数

// 防抖函数demo
function debounce(fn,time){
	let timer;
	return () => {
		if(timer){
			clearTimeout(timer);
		}
		timer = setTimeout(fn,time);
	};
}

使用场景：现在我们需要做一个搜索框，当用户输入文字，执行keyup事件的时候，需要发出异步请求去进行结果查询。但如果用户快速输入了一连串字符，例如是5个字符，那么此时会瞬间触发5次请求，这肯定不是我们希望的结果。我们想要的是用户停止输入的时候才去触发查询的请求，这个时候函数防抖可以帮到我们

2、函数节流（throttle）

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期

节流的意思是，在规定的时间内只会触发一次函数，如我们设置函数500ms触发一次，之后你无论你触发了多少次函数，在这个时间内也只会有一次执行效果

// 节流函数demo
function throttle(fn,time){
	let timer;
	return () => {
		if(timer){
			return;
		}
		timer = setTimeout(function(){
			fn();
			timer = null;
		},time);
	};
}

使用场景：window.onscroll，以及window.onresize等，每间隔某个时间去执行某函数，避免函数的过多执行

3、总结
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。