性能优化之防抖函数

最新推荐文章于 2024-05-07 10:28:08 发布
最新推荐文章于 2024-05-07 10:28:08 发布
阅读量305 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/97169457
版权

对于浏览器的缩放，滚动条的滚动都可能涉及到防抖

实现一个防抖函数需要注意的点：

  1. 防抖函数是否支持立即执行
  2. 防抖函数是否支持取消
  3. 防抖函数是否可以拿到返回值

非防抖

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#container {
			width: 100%;
			height: 200px;
			background: #ccc;
			text-align: center;
			line-height: 200px;
		}
	</style>
</head>
<body>
	<div id="container">
		1
	</div>

<script type="text/javascript">
	let count = 1
	let box = document.getElementById('container')
	// function debounce(fn, wait=500) {
	// 	let timer;	
	// 	return function(...args) {
	// 		if(timer) {
	// 			clearTimeout(timer)
	// 		}
	// 		timer = setTimeout(()=> {
	// 			fn.apply(this,args)
	// 		}, wait)
	// 	}
	// }
	function updateCount () {
		box.innerHTML=count++
	}
	// let actived = debounce(updateCount)
	box.addEventListener('mousemove', updateCount, true);


</script>
</body>
</html>

防抖函数debouce实现：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#container {
			width: 100%;
			height: 200px;
			background: #ccc;
			text-align: center;
			line-height: 200px;
		}
	</style>
</head>
<body>
	<div id="container">
		1
	</div>

<script type="text/javascript">
	let count = 1
	let box = document.getElementById('container')
	function debounce(fn, wait=500) {
		let timer;	
		return function(...args) {
			if(timer) {
				clearTimeout(timer)
			}
			timer = setTimeout(()=> {
				fn.apply(this,args)
			}, wait)
		}
	}
	function updateCount () {
		box.innerHTML=count++
	}
	let actived = debounce(updateCount)
	box.addEventListener('mousemove', actived, true);


</script>
</body>
</html>

防抖函数也要能够立即执行

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#container {
			width: 100%;
			height: 200px;
			background: #ccc;
			text-align: center;
			line-height: 200px;
		}
	</style>
</head>
<body>
	<div id="container">
		1
	</div>

<script type="text/javascript">
	let count = 1
	let box = document.getElementById('container')
	function debounce(fn, wait=500, immediate=true) {
		let timer, rs;
		return function(...args) {
			if(timer) {
				clearTimeout(timer)
			}
			if(immediate) {
				if(!timer) {
					rs = fn.apply(this,args)
				}
				//这里联系setTimeout异步问题
				timer = setTimeout(()=> {
					timer = null
				},wait)	
			}else {
				timer = setTimeout(()=> {
					rs = fn.apply(this,args)
				}, wait)
			}
			return rs
		}
	}
	function updateCount () {
		box.innerHTML=count++
	}
	let actived = debounce(updateCount)
	box.addEventListener('mousemove', actived, true);
	
</script>
</body>
</html>

防抖函数支持取消功能

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#container {
			width: 100%;
			height: 200px;
			background: #ccc;
			text-align: center;
			line-height: 200px;
		}
	</style>
</head>
<body>
	<div id="container">
		1
	</div>
	<button id="cancel">取消</button>

<script type="text/javascript">
	let count = 1
	let box = document.getElementById('container')
	let cancelBtn = document.getElementById('cancel')
	function debounce(fn, wait=2000, immediate=false) {
		let timer, rs;
		let debounced = function(...args) {
			if(timer) {
				clearTimeout(timer)
			}
			if(immediate) {
				if(!timer) {
					rs = fn.apply(this,args)
				}
				//这里联系setTimeout异步问题
				timer = setTimeout(()=> {
					timer = null
				},wait)	
			}else {
				timer = setTimeout(()=> {
					rs = fn.apply(this,args)
				}, wait)
			}
			return rs
		}
		debounced.cancel = function () {
			clearTimeout(timer)
		}
		return debounced;
	}
	function updateCount () {
		box.innerHTML=count++
	}
	let active = debounce(updateCount)
	box.addEventListener('mousemove', active, true);
	cancelBtn.addEventListener('click', active.cancel, true);

</script>
</body>
</html>

如果我们的函数执行的过程中存在异常，如何进行处理

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#container {
			width: 100%;
			height: 200px;
			background: #ccc;
			text-align: center;
			line-height: 200px;
		}
	</style>
</head>
<body>
	<div id="container">
		1
	</div>
	<button id="cancel">取消</button>

<script type="text/javascript">
	let count = 1
	let box = document.getElementById('container')
	let cancelBtn = document.getElementById('cancel')
	function debounce(fn, wait=500, immediate=true) {
		let timer, rs;
		let debounced = function(...args) {
			if(timer) {
				clearTimeout(timer)
			}
			if(immediate) {
				let callnow = !timer;
				//这里联系setTimeout异步问题
				timer = setTimeout(()=> {
					timer = null
				},wait)
				if(callnow) {
					rs = fn.apply(this,args)
				}
			}else {
				timer = setTimeout(()=> {
					rs = fn.apply(this,args)
				}, wait)
			}
			return rs
		}
		debounced.cancel = function () {
			clearTimeout(timer)
		}
		return debounced;
	}
	function updateCount () {
		box.innerHTML=count++
		throw Error('aa')
	}
	let active = debounce(updateCount)
	box.addEventListener('mousemove', active, true);
	cancelBtn.addEventListener('click', active.cancel, true);

</script>
</body>
</html>

整理自：https://www.bilibili.com/video/av50482255

. . . . .
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端性能优化探索.pdf
04-12
前端性能优化探索 前端性能优化是当前互联网开发中的一个重要话题。随着互联网技术的快速发展，Web前端技术也逐渐成为了互联网开发的重要一环。然而，在如今这个追求极致体验的时代，我们不仅要实现业务需求，更...
06-jQuery中的防抖和节流
CapejasmineY的博客
08-08 3683
jQuery中的防抖和节流，概念、引用场景、案例说明。
通过案例理解防抖与节流
qq_44996048的博客
05-26 324
说明：案例是通过jQuery来操作Dom元素的，其中防抖案例（使用到了jQuery中的ajax发起jsonp请求与art-template模板渲染，后续会持续更新）：淘宝搜索检索，节流案例：跟随的天使案例；通过案例可以让你清晰直观的理解防抖与节流操作。 防抖：延迟n秒执行回调，若在n秒内被触发则重新计时，只执行最后一次操作 经典案例：淘宝搜索栏检索案例 预览效果图：通过关键字搜索会检索出相近的词组关键字 代码说明：主要讲解js代码如何实现防抖操作，下文提供源码 ...
02常用算法：用jq实现防抖函数
最新发布
我们的目标是星辰大海！
05-07 122
02常用算法：用jq实现防抖函数
jQ input事件延时触发（防抖）
qq_42034594的博客
07-10 363
【代码】keyup事件延时触发。
防抖的实现
滕安超的博客
12-18 1022
函数防抖就是在函数频繁触发情况时，只有足够空闲的时间，才执行一次。 场景： 实时搜索（keyup） 拖拽（mousemove） 上代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;防抖&lt;/title&
javascript防抖函数debounce详解
10-16
总的来说，防抖函数在JavaScript中是非常实用的性能优化工具，尤其是在处理高频率的用户交互事件时。通过限制函数的执行次数，可以有效减少浏览器的工作负担，提升用户体验。在实际应用中，防抖函数通常结合事件监听...
在vue中使用防抖函数组件操作
10-15
在Vue开发中，有时我们需要优化性能，特别是在处理用户输入或者窗口滚动等频繁触发的事件时。防抖(debounce)函数就是一个非常实用的工具，它可以确保一个...理解并熟练运用防抖函数是提升Vue应用性能的重要技巧之一。
前端性能优化与Web安全
08-26
- 滚动优化：使用节流和防抖函数处理滚动事件，避免频繁触发。 - 首屏加载：骨架屏提供快速反馈，延迟加载非首屏内容。 **Web安全** 1. **XSS攻击**： - XSS（跨站脚本攻击）通过注入恶意脚本窃取用户数据，...
前端项目的性能优化方案
11-16
JS 优化中，高频事件应使用防抖和节流技术控制执行频率，拆分复杂函数，优化分支结构，使用 RAF 替代 setTimeout 在适当场景，以及利用 Web Worker 将计算密集型任务移出主线程，防止阻塞 UI 渲染。CSS 优化则强调...
React中实现防抖功能的两种方式
milugloomy的博客
04-11 8613
问题 这有一个简单的防抖函数，短时间内多次触发同一事件，只执行最后一次 function debounce (fn, wait) { let timer = null return function (...args) { if (timer !== null) { clearTimeout(timer) } timer = setTimeout(() => { fn(args) timer = null }, wait)
节流函数、防抖函数实现及应用
lwx931449660的博客
04-29 2807
项目中点击创建、编辑、删除等按钮都会发送http请求，网络卡顿的情况下点击按钮之后不能快速的响应，此时点击btn会重复发送请求，一定量造成卡顿延迟问题，对于此问题，有两种解决方案 第一，设置全局变量，在发送请求后，将按钮禁用，在响应回来之前按钮一直处于禁用状态，响应回来之后取消禁用， 在后台管理类项目中是少不了表格的，表格数据加载有loading状态，设置按钮disable...
函数去抖（debounce）& 函数节流（throttle）总结
热门推荐
喵的狂吼
07-14 2万+
//todo
JS 去抖（debounce）与节流（throttle）
落枫秋歌
08-28 754
函数防抖与节流 debouce/ throttle 定义：函数去抖的含义就是在一定时间段内只有一个同类的事件触发并执行；如果该时间段有同类的事件触发，则重新开始响应该事件； 实例：输入合法性检测、浏览器resize时自身的处理、scroll事件等 代码： let timer; function debouce (fn) { clearTimeout(timer); timer = setTimeout(() ...
5、Async await(等待异步)、函数的防抖和节流、模块化
m0_58779986的博客
03-12 243
5、Async await(等待异步)、函数的防抖和节流、模块化
防抖函数/防抖的详细讲解/防抖的代码实现
m0_56986233的博客
03-04 2396
防抖函数 要求： 当持续触发事件，一定时间内没有再触发事件，事件处理函数才会再执行一次* 当设定的事件来到之前，有一次触发了事件，就重新开始延时 代码的详细讲解 // 防抖函数 要求 // 当持续触发事件，一定时间内没有再触发事件，事件处理函数才会再执行一次 // 当设定的事件来到之前，有一次触发了事件，就重新开始延时 var input = document.querySelector('#input') // 防抖函数 function debounce(del
c++ 传入回调函数 参数没有传入_性能优化之防抖函数debounce
weixin_31697021的博客
01-16 501
在页面上的某些事件触发频率非常高，比如滚动条滚动、窗口尺寸变化、鼠标移动等，如果我们需要注册这类事件，不得不考虑效率问题。而防抖函数就是为了解决这一类问题而出现的。前言在页面上的某些事件触发频率非常高，比如滚动条滚动、窗口尺寸变化、鼠标移动等，如果我们需要注册这类事件，不得不考虑效率问题。当窗口尺寸发生变化时，哪怕只变化了一点点，都有可能造成成百上千次对处理函数的调用，这对网页性能的影响...
jQuery 按钮防抖函数debounce 立即执行和延后执行
小毛每天要顺毛的博客
08-20 3213
最近在做轮播图，但是多次点击下一步会有bug，于是想到了防抖函数。但是看到的都是jquery延后执行的防抖函数，而且两种模式的防抖函数没有结合在一起，于是找了很久。 防抖函数 function debounce(func, wait,immediate) {//func是要执行的函数，wait是毫秒数，immediate是是否要执行的参数，true立即执行，false延后执行 let timerout; return function () {
QT 防抖函数
05-25
防抖函数是一种常用的前端优化技术，可以避免在一段时间内频繁触发事件导致的性能问题。在 Qt 中，可以通过 QTimer 来实现防抖函数。 下面是一个简单的防抖函数示例： ```cpp void MainWindow::onTextChanged() { static QTimer timer; timer.stop(); timer.setSingleShot(true); timer.setInterval(500); // 500 毫秒内只触发一次 connect(&timer, &QTimer::timeout, this, &MainWindow::doSearch); timer.start(); } void MainWindow::doSearch() { QString keyword = ui->searchBox->text(); // 执行搜索操作 } ``` 在这个示例中，当文本框的内容发生变化时，会启动一个 QTimer 对象。如果在 500 毫秒内再次触发了 onTextChanged() 事件，就会重新启动计时器。只有在 500 毫秒内没有触发事件，才会执行 doSearch() 函数进行搜索操作。 需要注意的是，防抖函数通常用于减少冗余操作，而不是替代操作。如果你需要在用户输入时实时响应，可以考虑使用实时搜索或者模糊匹配等技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值