节流与防抖和其在vue中使用的测试

最新推荐文章于 2023-07-20 15:13:19 发布

shinjie1210

最新推荐文章于 2023-07-20 15:13:19 发布

阅读量402

点赞数

文章标签： javascript vue

本文链接：https://blog.csdn.net/shinjie1210/article/details/118294758

版权

本文介绍了JavaScript中的防抖和节流概念，并通过实例展示了它们在Vue项目中的具体应用，特别是在事件处理中的优化效果。防抖技术用于限制函数的执行次数，仅在停止操作一段时间后执行最后一次；而节流则确保在一定时间内函数定期执行，提供持续的反馈。文章还演示了在Vue中实现防抖以优化按钮点击事件的场景。

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

防抖

节流

vue中的防抖使用测试

防抖

简单理解防抖的内容：对当前操作重复执行会造成不必要的性能浪费，通过防抖可以让自定义时长内的重复操作的前n次都不执行，只执行最后一次，我们以一个简单mouseover事件举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 200px;
				height: 200px;
				margin: 0 auto;
				background-color: antiquewhite;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
		<script type="text/javascript">
		 const test =document.querySelector('#test')
		 function pass(e){
		 	this.innerHTML=(e.screenX+','+e.screenY)
		 }
		test.addEventListener('mousemove',pass)
		</script>
	</body>
</html>

鼠标在div内移动时会实时生成坐标展示在dom元素里࿰

最低0.47元/天解锁文章

shinjie1210

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节流与防抖和其在vue中使用的测试

目录防抖节流vue中的防抖使用测试防抖简单理解防抖的内容：对当前操作重复执行会造成不必要的性能浪费，通过防抖可以让自定义时长内的重复操作的前n次都不执行，只执行最后一次，我们以一个简单mouseover事件举例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css
复制链接

扫一扫