前端必备-防抖节流

前端必备-防抖节流

防抖节流—优化思想

js中有一个工具：lodash 实现了防抖节流
防抖：debounce 、节流：throttle

函数防抖

原理：当持续触发一个事件时，在n秒内，事件没有再次触发，此时才会执行回调；如果n秒内，又触发了事件，就重新计时。

适用场景：

• search远程搜索框：防止用户不断输入过程中，不断请求资源，n秒内只发送1次，用防抖来节约资源
• 按钮提交场景，比如点赞，表单提交等，防止多次提交
• 监听resize触发时， 不断的调整浏览器窗口大小会不断触发resize，使用防抖可以让其只执行一次

辅助理解：在你坐电梯时，当一直有人进电梯（连续触发），电梯门不会关闭，在一定时间间隔内没有人进入（停止连续触发）才会关闭。

函数节流

原理：当频繁的触发一个事件，每隔一段时间， 只会执行一次事件。
适用场景：

• 拖拽场景：固定时间内只执行一次， 防止高频率的的触发位置变动
• 监听滚动事件：实现触底加载更多功能
• 屏幕尺寸变化时， 页面内容随之变动，执行相应的逻辑
• 射击游戏中的mousedown、keydown时间

<html>
<head>
	<title>防抖和节流</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
</head>
<body>
	<input id="search" type="text" />
	<div id="content" style="height:150px;line-height:150px;text-align:center;color:white;background-color:#333;"></div>
	
	<script>
		//let search = document.getElementById("search");
		//let content = document.getElementById("content");
		
		//let num = 1;
		//function count(){
		//	console.log("发送数据请求。。。");
		//	content.innerHTML = num++;
		//}
		//search.onkeyup = _.debounce(count,2000); //防抖（再次输入则重新计算 取消定时器）  复杂数据转换-递归
		//search.onkeyup = _.throttle(count,2000); //节流（固定时间发送，不会重新计算）


		//若改造一下代码
		var obj = {
			num:1,
			count:function(n){
				console.log("发送数据请求。。。",n);
				content.innerHTML = this.num++;
			}
		}

		//自己手写代码  //防抖
		function debounce(fn,time,num){  
			let timeout;
			return function(){
				if(timeout) clearTimeout(timeout)
				timeout = setTimeout(()=>{
					fn.apply(obj,[num])  //第一个参数 作用域
					//call(obj,num)
					//fn()  //this指向为windows
				},time)
			}
		}
		search.onkeyup = debounce(obj.count,2000,10);

		//节流
		function throttle(fn,time){  
			let timeout; //第一次 undefined-false
			return function(){
				//if(timeout==undefined || timeout==""){
				if(!timeout){  //自动类型转换
					timeout = setTimeout(()=>{  //setTimeout 延迟执行
						//先清除之前的任务
						timeout = undefined;
						//调用函数
						fn.apply(obj)
					},time)
				}
			}
		}
		search.onkeyup = throttle(obj.count,2000);

		//time 先记录一次时间 再不断对比
		function throttle2(fn,time){
			let prev = 0; //旧时间点
			return function(){
				let now = Date.now();
				if(new - prev > time){
					fn.apply(obj);
					prev = now;
				}
			}
		}
		search.onkeyup = throttle2(obj.count,2000);
	</script>
</body>
</html>

参考文献：
https://mp.weixin.qq.com/s?__biz=MzAxMTMyOTk3MA==&mid=2456451562&idx=1&sn=73910cc04c9de46668869cc6f01068a3&chksm=8cdc1137bbab982139794193689c60e3485d9ba539cc48e8b95ca3ec9003f317f7742a716adb&mpshare=1&scene=24&srcid=0727lOUSK6DUauV84jIvUTJ7&sharer_sharetime=1627393410423&sharer_shareid=974ccd5c7437aef4c0fe1590ef081d17#rd