浅谈函数防抖和节流

川长思鸟来 2023-07-22 13:28 42阅读 0赞

## 什么是防抖、节流 ? ##

**防抖和节流是针对响应跟不上事件触发频率，而影响浏览器性能这类问题的两种解决方案。** 像鼠标移动事件onmousemove,滚动滚动条事件onscroll,窗口大小改变事件onresize，这类我们无法控制触发频率的事件，瞬间的操作都会导致这些事件会被高频触发。如果事件的回调较为复杂，就会导致响应跟不上触发，进而出现页面卡顿，假死现象。在实时检查输入时，如果我们绑定onkeyup事件发请求去服务器价差，用户输入过程中，事假输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。

## 防抖 ##

**理解：** 在触发事件时，不去立即执行函数，而是在达到期望时限后执行。

**案例：** 搜索输入时 ，用户输入停止两秒钟以后，才会发起搜索的ajax请求，防止发送大量ajax请求

<body>
    	<input type="text" id="inp" name="">
    	<script type="text/javascript">
    		// 搜索输入： 用户停止两秒钟以后，才会发起搜索的ajax请求
    		var inp = document.getElementById("inp");
    		function ajax(){ 
    			console.log('发送ajax请求')
    		}
    		inp.oninput = debounce(ajax,2000)
    		//fn:需要防抖的函数 delay：期望时限 
    		function debounce(fn,delay){ 
    			let timer = null; //借助闭包
    			return function(){ 
    				if(timer){ 
    				//进入该分支，说明当前正在一个计时过程中，并且又触发了相同事件，所以清除定时器，重新开始计时
    					clearTimeout(timer);
    				}
    				timer = setTimeout(fn,delay)
    			}
    		}
    	</script>
    </body>

## 节流 ##

**理解：** 频繁触发事件时，只会在指定的时间段内执行回调，即触发事件间隔大于等于指定的时间才会执行回调函数。

**案例：** 抢礼品时，要控制用户抢到的数量，不能认同一个人抢到大量的礼品

<body>
    	<div id="div">0</div>
    	<button id="btn">click</button>
    	<script type="text/javascript">
    		// 1s 只能点击一次 
    		var div = document.getElementById("div");
    		var btn = document.getElementById("btn");
    		btn.onclick = throttle(fun,1000)
    		function fun(){ 
    			div.innerHTML = +div.innerHTML + 1;
    		} 
    		function throttle(fun,delay){ 
    			let valid = true;
    			console.log(valid)
    			return function(){ 
    				console.log(valid)
    				if(!valid){   
    				//期望时限内点击第二次及以后就进入此分支，跳出函数
    					return false
    				}
    				valid = false;
    				setTimeout(()=>{ 
    					fun();
    					valid = true;
    					console.log(valid)
    				},delay)
    			}
    		}
    	</script>