专题 | 防抖和节流

快乐的高兴的学习代码中

已于 2023-04-23 14:34:29 修改

阅读量861

点赞数

分类专栏：详细知识文章标签： javascript 防抖节流

于 2023-02-11 17:19:51 首次发布

本文链接：https://blog.csdn.net/a123pplequeen/article/details/128984498

版权

本文详细探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，通过多个实例阐述它们的原理和应用场景。防抖常用于搜索框输入、表单验证和浏览器窗口缩放等场景，确保在单位时间内只执行最后一次操作。节流则适用于DOM拖拽、射击游戏和滚动事件等，限制执行频率，每隔一定时间执行一次。文中还提供了手写防抖和节流函数的实践代码，帮助读者深入掌握这两种优化技巧。

摘要由CSDN通过智能技术生成

一

防抖：单位时间内，频繁触发事件，只执行最后一次

场景：搜索框搜索输入（利用定时器，每次触发先清掉以前的定时器，从新开始）

节流：单位时间内，频繁触发事件，只执行一次

场景：高频事件快速点击，鼠标滑动、resize事件、scroll事件（利用定时器，等定时器执行完毕，才开启定时器，不用打断）

一般用lodash库，利用里面的debounce（防抖）和throttle(节流)来做

二

【前端面试题：防抖与节流（二）】 https://www.bilibili.com/video/BV1ig411u7LG/?share_source=copy_web&vd_source=c1fe9c75396fdc6f65b56d15f5eb00b3

防抖

防抖：用户触发事件过于频繁，只需要最后一次事件的操作

案例一：输入框触发过于频繁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<script>
		let inp = document.querySelector("input");
		inp.oninput = function(){
			console.log(this.value);
		}
		</script>
	</body>
</html>

案例二：用定时器解决触发频繁问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<script>
		// 防抖方法一  好烦啊，我也不知道是哪些部分不懂，明明拆开我全晓得，烦躁
		 let inp = document.querySelector("input");
		 // t代表的是用户触发的次数
		 let t = null;
		 inp.oninput = function(){
		 	if(t !== null){
				clearTimeout(t);
			}
			t = setTimeout(()=>{
				console.log(this.value);
			},500)
		}
		
		</script>
	</body>
</html>

案例三：用debounce解决触发频繁问题

案例二的代码据说是一团垃圾，因为业务逻辑和什么混在一起了，所以下面用闭包封的更好些

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<script>
			// 防抖方法二 debounce
		let inp = document.querySelector("input");
		let t = null;
		inp.oninput = debounce(function(){
			console.log(this.value);
		},500)
		
		function debounce(fn,delay){
			return function(){
				if(t !== null){
					clearTimeout(t);
				}
				t = setTimeout(()=>{
					fn.call(this);
				},delay)
			}
		}
		
		</script>
	</body>
</html>

节流

节流就是控制执行次数

案例一：执行次数过多

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height:800px;
			}
		</style>
	</head>
	<body>
		<script>
			window.onscroll = function(){
			 	console.log("123");
			}
		</script>
	</body>
</html>

案例二：定时器节流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height:800px;
			}
		</style>
	</head>
	<body>
		<script>
		// 节流方法一 定时器
		let flag = true;
		window.onscroll = function(){
			if(flag){
				setTimeout(()=>{
					c