解决在 resize或scroll事件处理中频繁调用相同方法问题(方法节流和方法去抖动)

最新推荐文章于 2025-04-22 11:45:10 发布

原创最新推荐文章于 2025-04-22 11:45:10 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在频繁触发的事件（如resize和scroll）处理中使用节流技巧来优化DOM操作的方法，以减少不必要的性能损耗并提高用户体验。通过自定义throttle函数，可以有效地控制事件回调的执行频率。

问题描述：

在resize，scrolls事件处理中，由于事件触发频率高，如果在回调中有dom操作比较消耗性能。很容易导致卡顿或者浏览器

崩溃，而实际需求往往不需要执行那么频繁。

如何解决该问题：

<script>
		function throttle(fun,delay){
			let timer = null;
			if(timer){
				clearTimeout(timer);
			}
			return function(){
				setTimeout(function(){
					fun();
				},delay);
			}
		} 
		var firstResize = true;
		window.onresize = function(){
			if(firstResize){
				throttle(function(){
					alert(1)
				},30)();
			}
			firstResize = false;
		}
	</script>

参考：https://www.jianshu.com/p/4f3e2c8f5e95