【JS】防抖和节流（面试重点）

一颗不甘坠落的流星

已于 2023-06-30 11:19:55 修改

阅读量154

点赞数 1

分类专栏： JavaScript 笔记文章标签：防抖节流 javascript

于 2021-06-15 10:24:44 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/117918043

版权

JavaScript 笔记专栏收录该内容

73 篇文章 16 订阅

订阅专栏

文章目录

- 一、函数防抖
- 二、函数节流

一、函数防抖

防抖定义：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

未做防抖处理之前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		hr{
			margin: 100px 0;
		}
	</style>
	<body>
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
	</body>
	<script type="text/javascript">
		// onscroll：页面滚动事件
		window.onscroll = function(){
			console.log("滚动事件触发了")
		}
	</script>
</html>

滚动事件在同一时间内触发多次，消耗性能
进行防抖处理之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		hr{
			margin: 100px 0;
		}
	</style>
	<body>
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
	</body>
	<script type="text/javascript">
		// 存储延时器
		var t = null; 
		// onscroll：页面滚动事件
		window.onscroll = function(){
			clearTimeout(t);
			t = setTimeout(function(){
				console.log("滚动事件触发了")
			},500)
		} 
	</script>
</html>

在一定时间内如果多次触发，则后一次会反复把前一次的延时器清除，重新执行延时器，再触发滚动事件，优化性能

在这里插入图片描述

进行封装使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		hr{
			margin: 100px 0;
		}
	</style>
	<body>
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
	</body>
	<script type="text/javascript">
		// 封装防抖函数
		function fun(callback,delay){
			// 存储延时器
			var t = null; 
			return function(){
				clearTimeout(t);
				t = setTimeout(callback,delay)
			}
		}
		// onscroll：页面滚动事件
		window.onscroll = fun(function(){
			console.log("滚动事件触发了")
		},500)
	</script>
</html>

二、函数节流

节流定义：规定在一个单位时间内，只能触发一次函数。如果这个单位时间类触发多次函数，只有一次生效。

未做节流处理之前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		hr{
			margin: 100px 0;
		}
	</style>
	<body>
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
	</body>
	<script type="text/javascript">
		// onscroll：页面滚动事件
		window.onscroll = function(){
			console.log("滚动事件触发了")
		}
	</script>
</html>

滚动事件在同一时间内触发多次，消耗性能
进行节流处理之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		hr{
			margin: 100px 0;
		}
	</style>
	<body>
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
	</body>
	<script type="text/javascript">
		// 设置间隔时间
		var delay = 1000;
		// 获取时间戳
		var last = new Date().getTime(); 
		window.onscroll = function(){
			// 获取当前时间戳
			var now = new Date().getTime();
			// 进行判断
			if(now - last > delay){
				last = now;
				console.log("滚动事件触发了")
			}
		}
	</script>
</html>

在一定时间内，滚动事件只触发一次，优化性能
进行封装使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		hr{
			margin: 100px 0;
		}
	</style>
	<body>
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
		<hr /><hr /><hr /><hr /><hr /><hr />
	</body>
	<script type="text/javascript">
		// // 封装节流函数
		function fun(callback,delay=200){
			// 获取时间戳
			var last = new Date().getTime(); 
			return function(){
				var now = new Date().getTime();
				if(now - last > delay){
					last = now;
					callback();
				}
			}
		}
		// onscroll：页面滚动事件
		window.onscroll = fun(function(){
			console.log("滚动事件触发了")
		},1000)
	</script>
</html>