事件节流详解

最新推荐文章于 2025-07-03 23:26:32 发布

Jane_96

最新推荐文章于 2025-07-03 23:26:32 发布

阅读量487

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：事件节流

本文链接：https://blog.youkuaiyun.com/Jane_96/article/details/94041523

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨了事件节流的概念，从问题引入、解决方法到抽象化改进，阐述了如何通过设置时间间隔来限制事件处理函数的执行次数，以此提高浏览器性能。特别是在处理onscroll和onresize等高频事件时，事件节流是优化性能的有效手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件节流

问题引入

当浏览器的窗口变化的时候，控制台打印出"reize"的记录

问题解决

直接绑定
下面的这段代码，鼠标随便动几下，控制台就打印了若干的信息。。明显，效率非常低下。


<!DOCTYPE html>
<html>
	<head>
		<title>事件节流</title>
		<meta charset="utf-8">
	</head>
	<body></body>
	<script> 
		window.onresize = () => {
			console.log("this is resize" , new Date());
		}		
	</script>	
</html>

改进后的绑定
改进后的方法性能提高了很多，设置了定时器，1s内只允许打印一次。

<!DOCTYPE html>
<html>
	<head>
		<title>事件节流</title>
		<meta charset="utf-8">
	</head>
	<body></body>
	<script> 
    let timer = null;
		window.onresize = () => {
			if(!timer){
				timer = setTimeout(() => {
					console.log("this is resize" , new Date());
					timer = null;
				} , 1000);
			}
		}	
	</script>	
</html>

问题抽象

事件节流概念和抽象改进后的方法

含义：设置一个时间间隔，时间间隔内只允许执行一次。好像客运站大巴，到点才会走，并且在一定的时间段内只有一辆大巴在工作

html代码，复制到本地即可执行。可在浏览器的控制台中查看打印信息：

<!DOCTYPE html>
<html>
	<head>
		<title>事件节流</title>
		<meta charset="utf-8">
	</head>
	<body>
		<input type="text">
	</body>
	<script> 
		function throttle(fn , delay = 1000) {
			let content = null;
			let arg = null;
      		let sto = null;
      			
			let run = () => {
				sto = setTimeout(()=>{
					fn.apply(content , arg);
					sto = null;
				} , delay);
      }			
      
			return function(){
				content = this;
				arg = arguments;
				!sto && run();
			}
    }		

		function resize(){
			console.log("this is resize");
    }	

		window.addEventListener('resize' , throttle(resize));	
	</script>
</html>

总结：

为了解决开发过程中遇到性能问题，常见于onscroll、onresize等，可以用事件节流来减少不必要的调用过程，从而优化性能。


/** 事件节流方法
* @param fn:需要触发的方法
* @param delay: 延时，默认100ms
*/
function throttle(fn , delay = 1000) {
  let content = null;
  let arg = null;
  let sto = null;
        
  let run = () => {
    sto = setTimeout(()=>{
      fn.apply(content , arg);
      sto = null;
    } , delay);
  }			
  
  return function(){
    content = this;
    arg = arguments;
    !sto && run();
  }
}