浅谈函数防抖和节流

什么是防抖、节流 ?

防抖和节流是针对响应跟不上事件触发频率,而影响浏览器性能这类问题的两种解决方案。 像鼠标移动事件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>

你可能感兴趣的:(性能优化,前端,javascript)