前端必备-防抖节流

最新推荐文章于 2022-12-16 11:45:23 发布

monkeyhlj

最新推荐文章于 2022-12-16 11:45:23 发布

阅读量223

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/119119641

版权

前端学习专栏收录该内容

53 篇文章 2 订阅

订阅专栏

文章目录

- 前端必备-防抖节流

前端必备-防抖节流

防抖节流—优化思想
在这里插入图片描述
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>