Vue3按钮防抖

原创 已于 2024-04-16 10:30:13 修改 · 339 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2024-03-21 17:08:58 首次发布

npm i --save lodash 

			<el-row> 
				<el-col :span="2">
					<el-button type="primary" class="el-btn" @click="ShowPLY">ShowPLY</el-button>
				</el-col>

				<!-- <el-button type="primary" class="el-btn" @click="testScene">testPLY </el-button> -->

				<div id="my-three" style="height:600px;width:100%"></div>

			</el-row>


import { debounce, throttle } from 'lodash'


const ShowPLYExec = async () => { 
	GluePlyFileDate.value = getFileNameFromPath(GluePlyResultFile.value)

	try {

		//let pa = { No: "", PlyFile: "D:/aaa/work/project/aaa/aa/aa/PythonScript/GluePLY/Glue5.ply" GluePlyResultFile }
		let pa = { No: "", PlyFile: GluePlyResultFile.value }
		//let plyUrl = ""
		await axios.post(global_const.WEBAPI + `Python/ShowPLY`, pa)
			.then(function (response) {
				console.log(response);

			})
			.catch(function (error) {
				//ElMessage.error(cmd + '命令执行异常！' + error)
				console.log(error);
			});

	}
	catch (err) {
		//在此处理错误
		console.log(err)
	}

}

const ShowPLY = debounce((evt) => {
	// ---- ^ 业务逻辑 ----
	// 定义fn方法
	const fn = (evt: any) => {
		console.log('debounce =>', evt)
		ShowPLYExec()
	}
	// 调用fn方法
	fn(evt)
	// ---- / 业务逻辑 ----
}, 3000)

vue3单个页面进行防抖节流
weixin_73098736的博客
07-03 468
【代码】vue3单个页面进行防抖节流。
vue 保存按钮表单提交事件防抖解决办法（函数封装）
@必意玲
03-01 1686
防抖：防止一段事件内多次点击，比如提交表单，出现提交多条数据情况 下面是解决办法 1. vue 保存按钮添加防抖 <el-button @click="debounceSave()">保存</el-button> import { debounce } from '@/utils/$utils' export default { data() { return { debounceOnExport: debounce(this.onExport, 40.
给el-button加上防抖
努力努力再努力的博客
01-13 4294
vue项目中给el-button加上防抖 在项目开发中，相必大家时常会遇到按钮重复点击后引起事件重复提交的问题，在业余时间，我总结了几种方法，在此简述一下 利用按钮的 loading 属性，防止用户重复点击 直接把loading放在http请求去做，统一封装方法 给按钮加上防抖，点击一次需要间隔一段时间才能触发二次点击 我们写一下第三种解决方法，在这里我们使用vue全局指令来实现，选取了一种简单的指令方式 大概思路 ： 当第一次点击按钮时，设置它的 disabled 属性，超过防抖时间后释放属性 在项目
vue工程 el-button添加全局防抖设置
happy81997的博客
02-14 1401
给按钮加上一个全局指令 noMoreClick 来限制在一定的时间内控件为 disabled不让再次点击。
vue3节流防抖
m0_50884068的博客
11-09 715
【代码】vue3节流防抖。
vue3.0防抖
Ginger博客
09-21 241
【代码】vue3.0防抖。
项目中节流防抖的函数封装
weixin_43144716的博客
07-09 531
【代码】项目中节流防抖的函数封装。
Vue的click事件防抖和节流处理详解
10-16
本文将针对Vue框架中的click事件，详细讲解防抖和节流的实现和原理。 首先，我们来解释一下防抖和节流的概念： - 函数防抖（debounce）：指的是当事件持续触发，防抖函数会等待一定的时间，在这段时间内如果事件...
Vue使用自定义指令实现按钮防抖功能，防止多次调接口
热门推荐
weixin_43551242的博客
04-14 1万+
首先什么是防抖？ 防抖就是指☞触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。说到防抖大家应该会想到节流，两者cp哈哈哈。 什么是节流？ 节流是指连续触发事件但是在n秒钟只执行一次。 ` function throttle(fn, delay){ let timer; return function(){ if (timer) { return; } let me = this; let _arg = arguments; timer = setTime..
Vue3实现防抖、单页面引入、全局引入、全局挂载
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
08-15 709
Vue3实现防抖、单页面引入、全局引入、全局挂载
vue3自定义指令，按钮点击事件防抖
qq_35641191的博客
07-18 666
vue3自定义指令，按钮点击事件防抖
vue3常用自定义指令封装v-permission，按钮权限控制，添加防抖节流
爱码士&的博客
12-13 6507
后台管理项目免不了要做权限控制，常见的分为路由级别和按钮级别，在此主要针对于按钮权限，比如说某个用户或者角色对数据有没有增删改查的权限，例如以下功能，巡查人员可以点击导入和新建，而一般用户只能选择下载模板。在 directives文件夹下分别创建permission、debounce、throttle三个ts文件，分别用于存放权限控制，防抖和节流的业务逻辑，结构清晰，方便维护以及更低的耦合度。在index.ts文件中分别导入每个自定义指令对象，再遍历注册每一个指令。
如何在Vue3项目中使用防抖节流技巧
都随它大小便吧
11-02 6055
防抖节流是可以说是一种优化组件性能的技巧，可以有效减少组件中的渲染次数和计算量，从而提高组件的响应速度和用户体验。在Vue3中可以使用`lodash`库中的`debounce`和`throttle`函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数，调用方式都差不多。
vue3项目中按钮防抖指令
weixin_44482236的博客
06-06 253
vue3指令
基于vue3.0的防抖（ref原理）
zy991315的博客
12-04 483
基于vue3.0的防抖使用（ref原理）
vue3中的全局防抖节流指令
weixin_46095200的博客
04-06 1611
适用场景，一般业务当中存在查询、新增、编辑等操作类型，使用防抖有效防止疯狂点击增加多条数据问题。
vue3+js 实现按钮防抖，避免请求重复提交
csdnyp的博客
07-01 3194
vue3+js 实现按钮防抖，避免请求重复提交
vue3、ts、Element-plus按钮防抖自定义指令
qq_51622532的博客
04-19 4354
vue3、ts 按钮防抖自定义指令
vue3.0封装防抖和节流
zsj702177的博客
01-12 871
点击事件，在一段事件内连续点击，指定时间内只触发一次点击后1秒之后再触发事件相当于setTimeout。
Vue2按钮防抖功能
最新发布
08-09
在 Vue 2 中实现按钮防抖功能，可以通过以下几种方式来完成，确保在短时间内多次点击按钮时，只执行一次操作，从而避免重复请求或数据创建的问题。 ### 使用自定义指令实现按钮防抖 在 Vue 2 中，可以通过自定义指令的方式对按钮点击行为进行统一控制。该方法通过在 `v-debounce` 指令中添加点击事件监听器，并结合 `setTimeout` 实现防抖逻辑。在点击后禁用按钮，并在指定时间后重新启用，防止重复点击。 ```javascript // directive.js import Vue from &#39;vue&#39;; Vue.directive(&#39;debounce&#39;, { inserted(el, binding) { el.addEventListener(&#39;click&#39;, () => { if (!el.disabled) { el.disabled = true; setTimeout(() => { el.disabled = false; }, binding.value || 3 * 1000); // 默认 3 秒防抖时间 } }); } }); ``` ```vue <template> <div> <button v-debounce>防抖按钮</button> </div> </template> <script> import &#39;./directive&#39;; // 引入自定义指令 export default { // 组件逻辑 }; </script> ``` 该方法通过直接操作 DOM 的 `disabled` 属性实现防抖，适用于全局按钮点击控制，且逻辑统一、易于维护 [^2]。 --- ### 使用函数封装实现可复用的防抖逻辑 可以通过定义一个通用的 `Debounce` 函数，在方法调用时对执行逻辑进行包装，延迟执行目标函数，直到指定时间间隔内没有再次触发。 ```javascript // utils.js export const Debounce = (fn, wait) => { let delay = wait || 500; let timer; return function () { let args = arguments; if (timer) { clearTimeout(timer); } let callNow = !timer; timer = setTimeout(() => { timer = null; }, delay); if (callNow) { fn.apply(this, args); } }; }; ``` ```vue <template> <button @click="debouncedClick">提交</button> </template> <script> import { Debounce } from &#39;@/utils&#39;; export default { methods: { init() { this.debouncedClick = Debounce(this.handleSubmit, 1000); }, debouncedClick() { // 由 Debounce 包装后的点击方法 }, handleSubmit() { console.log(&#39;提交数据&#39;); // 实际提交逻辑 } }, mounted() { this.init(); } }; </script> ``` 此方法适用于需要在多个组件中复用的防抖逻辑，能够保持组件方法的干净和可测试性 [^1]。 --- ### 在组件内部直接实现防抖逻辑 如果仅需在单个组件中使用防抖功能，可以直接在方法内部管理定时器，实现简单的防抖机制。 ```vue <template> <button @click="debouncedClick">提交</button> </template> <script> export default { data() { return { timer: null }; }, methods: { debouncedClick() { if (this.timer) { clearTimeout(this.timer); } this.timer = setTimeout(() => { this.handleSubmit(); }, 1000); // 1秒防抖时间 }, handleSubmit() { console.log(&#39;按钮点击，提交数据&#39;); // 实际提交逻辑 } }, beforeDestroy() { if (this.timer) { clearTimeout(this.timer); } } }; </script> ``` 该方式适合特定组件内部使用，逻辑清晰，无需引入额外函数或指令 [^3]。 --- ### 总结 在 Vue 2 中实现按钮防抖功能，可以采用以下三种主要方式： - 通过自定义指令控制按钮点击行为，适用于全局控制； - 封装通用的 `Debounce` 函数，提高代码复用性； - 在组件内部直接使用定时器实现防抖逻辑，适用于特定组件需求。 每种方式都可根据具体业务场景灵活选择，确保在用户频繁点击按钮时，有效避免重复请求或数据提交的问题。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值