转载

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)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

正文到此结束
本文目录