函数防抖与节流

兔子团

已于 2022-06-14 18:42:28 修改

阅读量313

点赞数 1

文章标签： javascript 前端 html5

于 2022-06-14 17:00:14 首次发布

本文链接：https://blog.youkuaiyun.com/caigoutu/article/details/125266124

版权

本文介绍了函数防抖和节流的概念，以及它们在前端开发中的应用场景。防抖技术常用于用户输入框的搜索请求，确保在用户停止输入后才发送一次请求；节流则适用于轮播图或按钮响应，限制事件处理函数的频繁触发，提高性能。通过lodash库，我们可以轻松实现这两个功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大前提

需要借助引用（里面已经封装好防抖和节流的Lodash插件包）
（2022.6.14目前vue-cli的node_modules库里已自动安装lodash并没有版本问题，适配vue2，3，
如没有可以尝试安装。npm install lodash --save）

函数防抖

含义：本质是执行最后一次：前面的所有触发都被取消，最后一次执行在规定的时间之后才会触发，
也就是说如果连续快速的触发，只会执行最后一次。
（类似任一英雄1s内平a几十次，那么最终只会a出去一次）

操作步骤：
1、引入lodash包import _ from 'lodash';
2、引用_debounce(func，【wait=0】)防抖函数，设定延迟时间

常见场景：用户在输入框里输入内容全部完成后才会触发（输入框情况只发一次请求）

//lodash插件：里面封装了函数的防抖与节流的业务【闭包+延迟器】
	//1、lodash函数库对外暴漏_函数，其中_debounce(func，【wait=0】)为防抖函数
	let result=_.debounce(function(){
		console.log("我在一秒之后执行一次")
	},1000);
	result();

<head>
//引入lodash：lodash全部功能引入
<script src="./lodash.js"></script>
</head>
<body>
	<p>
	请输入搜索内容：<input type="text">
	</p>
</body>
<script>
//防抖：前面的所有触发都被取消，最后一次执行在规定的时间之后才会触发，
//也就是说如果连续快速的触发，只会执行最后一次
	let input=document.querySelector('input');
	//文本发生变化立即执行（这是没做防抖，写一个字发一次请求）
	input.oninput=function(){
	console.log('ajax发请求')；
	}
	//这是防抖后的，输入一堆只会在敲完最后一个字，一秒之后才会触发一次
	input.oninput=_.debounce(function(){
	console.log('ajax发请求')；
	}，1000)
</script>

函数节流

含义：本质是把频繁触发变为少量触发：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调
(类似技能cd,cd自己设置,cd没好你用不了技能)

操作步骤：
1、引入lodash包import _ from 'lodash';
2、引用_throttle(func，【wait=0】)节流函数，设定延迟时间

常见场景：轮播图、按钮绑定响应事件（可以有少量触发响应）

<head>
//引入lodash：lodash全部功能引入
<script src="./lodash.js"></script>
</head>
<body>
	<h1>我是计数器<span>0</span></h1>
	<button>点我加1</button>
	</p>
</body>
<script>
//节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，
//也就是把频繁触发变为少量触发
 	//获取节点
	let span=document.querySelector('span');
	let button=document.querySelector('button');
	let count=0；
	//计数器：(用了节流)在5秒以内，数字只能加一次1
	button.onclick=_.throttle(function(){
		//节流：目前这个回调函数5s执行一次
		//假如这里面有很多业务代码，可以给浏览器很充裕的时间去解析
		count++;
		span.innerHTML=count;
	},5000);
</script>