欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

事件节流 详解

程序员文章站 2022-05-14 13:28:54
...

事件节流

问题引入

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

问题解决

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

    
<!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>

  2. 改进后的绑定
    改进后的方法性能提高了很多，设置了定时器，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>

问题抽象

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

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

  2. 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>

  3. 总结：

    为了解决开发过程中遇到性能问题，常见于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();
  }
}
相关标签： 事件节流

上一篇： 获取视频第一帧

下一篇： typescript - 1

推荐阅读