js函数节流和函数防抖

最新推荐文章于 2024-08-21 09:15:00 发布

季夏廿九

最新推荐文章于 2024-08-21 09:15:00 发布

阅读量1.4k

点赞数 1

分类专栏： js 文章标签：函数节流函数防抖

本文链接：https://blog.csdn.net/weixin_43882226/article/details/90295869

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js函数截流和函数防抖

开发过程中，总会遇到部分代码因为高频率执行造成缓存过多或者引起别的问题，函数节流和函数防抖就是用来优化这些高频率执行的代码。

大家都知道哈士奇是一种智商感人的狗狗，那么经常会遇到出差什么的，给二哈准备好几天天的食物结果它没两天就吃完了，这时候我们就需要一个自动喂食机来控制每顿饭的量，让它刚好吃饱，也不至于吃撑。而函数节流就类似这个自动喂食机，在js代码在执行足够的频率就能达到效果的时候，限制代码的执行，这样节省我们的服务器资源，避免因为高频率执行造成的卡顿。

函数防抖是在相同的事件连续请求，请求结果是在上一次结果基础上新增或者相同的情况下，停止一段时间直到事件不再发生后再统一请求。就类似我们去银行存一万块钱，我们一百一百的存和一下全存的效果是相同的，但是一百一百的存就会严重的浪费效率。

下面是函数节流和函数防抖在页面元素滚动时候的应用场景
为了方便看到效果，我把时间都限制在1秒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#one, #two, #three{
			width: 220px;
			height: 200px;
			border: 1px solid black;
			overflow-y: auto;
			margin: 20px auto;
		}
		#one-four, #two-four, #three-four{
			width: 200px;
			height: 600px;
		}
	</style>
	<body>
		<!--普通函数-->
		<div id="one"><div id="one-four"></div></div>
		<!--函数节流-->
		<div id="two"><div id="two-four"></div></div>
		<!--函数防抖-->
		<div id="three"><div id="three-four"></div></div>
	</body>
	<script type="text/javascript">
		// 普通函数
		document.getElementById("one").onscroll = () => {
			console.log('普通函数')
		}
		// 函数节流
		var closure = true // 初始化执行状态
		document.getElementById("two").onscroll = () => {
			if (!closure) return // 如果开关关闭，说明上次执行没有完成，则return
			closure = false // 关闭开关，开始执行
			setTimeout(() => {
				console.log('节流执行函数')
				closure = true // 打开开关
			}, 1000) // 延迟1秒执行函数，并打开开关，可以进行下一次执行
		}
		// 函数防抖
		var shake // 声明变量接受
		document.getElementById("three").onscroll = () => {
			clearTimeout(shake) // 每执行一下清除延时器，回归初始状态
			shake = setTimeout(() => {
				console.log('函数防抖') // 执行函数
			}, 1000)
		}
	</script>
</html>

注意：函数节流示例代码内部延时器只是用来实现效果，在实际应用中，延时器位置应该是异步请求或者所需事件，成功返回或者指定结果成立改变状态，请不要被误导，谢谢
关于函数节流的具体应用场景在我的博客《基于Vue-cli的手写轮播图（无限轮播，切换，点击预览）【函数节流】》有具体的应用，地址https://blog.csdn.net/weixin_43882226/article/details/89552260