节流防抖

最新推荐文章于 2024-08-27 13:38:21 发布

晚晚皆安_l

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量29

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_54944931/article/details/129144231

版权

文章介绍了JavaScript中两种优化性能的技术——节流和防抖。节流函数通过限制函数在特定时间内的执行次数来降低执行频率，而防抖函数则确保在一系列高频触发后只执行最后一次。它们都使用了setTimeout和clearTimeout来控制函数的执行，分别适用于不同场景的需求。

摘要由CSDN通过智能技术生成

1、节流

我们可以设计一种类似控制阀门一样定期开放的函数，事件触发时让函数执行一次，然后关闭这个阀门，过了一段时间后再将这个阀门打开，再次触发事件。

高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。

function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) {
			setTimeout(()=> {
				fn.apply(this, arguments);
				valid = true;
			}, delay)
			valid = false;
		}
	}
}

2、防抖

事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。（一直点击只执行最后一次）

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。

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