都2025年了，你还在提交按钮上面用防抖函数？ 点击关注公众号，“技术干货” 及时达！前言在日常开发中会涉及到各种按钮请求，测试人员经常怼着一个按钮狂点不止。这样导致很多数据重复提交！ 「前端人员经常怼着测试说」：你能不能不要点那么快啊！ （由于有时候接口返回比较慢） 「测试回怼」：我不知道点击有没有成功呀！所以多点几次咯~ 「项目经理」：这是个 BUG，你们前后端开发商量一下看怎么修复吧！ 「后端人员」：这不是我的问题，请求慢我没办法。。前端发生的事，找前端吧！ 防抖那既然这么喜欢围着按钮狂点，那就加防抖呗！ //伪代码 el-button@click='handleSubmit'有本事再狂点击/el-button //省略...debounce的实现 consthandleSubmit =debounce(submit,1000) 加防抖看似解决了问题了。。没想到过了几天！测试又在提 BUG... 「测试」: 兄弟，我咋还是重复提交了 2 条数据啊！ 「前端」：你又搞了什么骚操作？点了几下啊！ 「测试」：跟上次一样啊，我作死的在点。。 「前端」：把游览器 F12 打开，我过来看一下吧！哎~ 经过两人抓头排查，问题出现了：由于防抖函数设置的时间是 1 秒，后端接口返回的时间是 5 秒。。测试兄弟在这 5 秒内狂点了 100 多下。。（真是 5 秒真男人啊） 还是加按钮 Loading 吧最后没办法了，只能通过请求之前给按钮加一个 loading 禁用状态，等接口返回 200 再清除 loading 了！ //伪代码 el-button @click='handleSubmit':loading='loading'有本事再狂点击/el-button letloading =false functionhandleSubmit(){ loading =true//开启loading ajax('xxx/xxx/xxx').then(res={ if(res.code==200){ loading =false//关闭loading } }) } 这下就完美解决了测试兄弟的 BUG！可是又面临一个开发问题，就是如果很多地方要用到提交，是不是每个页面都去写一个 loading 变量啊！ 接下来就是重头戏了，咱们把它封装成一个 vue 指令吧！ 指令封装（vue3）//入口文件main.jsimport{ createApp }from'vue'importAppfrom'./App.vue' import{ bLoading }from'./permission/loading' constapp =createApp(App) bLoading(app)//全局注册//bLoading.jsimporttype {App}from'vue' lettag =null constclassName =` //loading图标的样式 el-icon { --color: inherit; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 1em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1em; position: relative; width: 1em; fill: currentColor; color: var(--color); font-size: inherit; }` //loading图标，可以去阿里图库上面复制一个svgconsti =`i class=${className}id='loading' svg t="1745215287730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2663" width="200" height="200"path d="M834.7648 736.3584a5.632 5.632 0 1 0 11.264 0 5.632 5.632 0 0 0-11.264 0z m-124.16 128.1024a11.1616 11.1616 0 1 0 22.3744 0 11.1616 11.1616 0 0 0-22.3744 0z m-167.3216 65.8944a16.7936 16.7936 0 1 0 33.6384 0 16.7936 16.7936 0 0 0-33.6384 0zM363.1616 921.6a22.3744 22.3744 0 1 0 44.7488 0 22.3744 22.3744 0 0 0-44.7488 0z m-159.744-82.0224a28.0064 28.0064 0 1 0 55.9616 0 28.0064 28.0064 0 0 0-56.0128 0zM92.672 700.16a33.6384 33.6384 0 1 0 67.2256 0 33.6384 33.6384 0 0 0-67.2256 0zM51.2 528.9984a39.168 39.168 0 1 0 78.336 0 39.168 39.168 0 0 0-78.336 0z m34.1504-170.0864a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 0 0-89.6 0zM187.904 221.7984a50.432 50.432 0 1 0 100.864 0 50.432 50.432 0 0 0-100.864 0zM338.432 143.36a55.9616 55.9616 0 1 0 111.9232 0 55.9616 55.9616 0 0 0-111.9744 0z m169.0112-4.9152a61.5936 61.5936 0 1 0 123.2384 0 61.5936 61.5936 0 0 0-123.2384 0z m154.7776 69.632a67.1744 67.1744 0 1 0 134.3488 0 67.1744 67.1744 0 0 0-134.3488 0z m110.0288 130.816a72.8064 72.8064 0 1 0 145.5616 0 72.8064 72.8064 0 0 0-145.5616 0z m43.7248 169.472a78.3872 78.3872 0 1 0 156.8256 0 78.3872 78.3872 0 0 0-156.8256 0z" fill="" p-id="2664"/path/svg ` //核心代码exportfunctionbLoading(app: AppElement) { app.directive('bLoading',(el, binding) ={ if(typeofbinding.value!=='function') { thrownewError('Directive value must be a function') } el.addEventListener('click',() ={ addNode(el)//添加loading图标 setTimeout(() ={ //执行异步函数 binding.value(() ={ cleanNode(el)//清除loading }) })//延迟执行异步函数 }) })} //新增loading图标functionaddNode(el) {if(el.firstElementChild.tagName==='I') {//如果按钮上面自带图标，就先移除 tag = el.firstElementChild; el.removeChild(el.firstElementChild) el.insertAdjacentHTML('afterbegin', i) }else{ el.insertAdjacentHTML('afterbegin', i) } el.setAttribute('disabled',true)rotate('loading')} //清除loading图标functioncleanNode(el) { el.removeAttribute('disabled')if(el.firstElementChild) { el.removeChild(el.firstElementChild); if(tag) { el.prepend(tag) } }} //图标旋转动画functionrotate(id) {constelement =document.getElementById(id);letangle =0;// 初始角度为0度constspeed =2;// 旋转速度，单位为度/帧（例如，每帧旋转2度）functionrotate() { angle = (angle + speed) %360;// 确保角度在0到360之间循环 element.style.transform=`rotate(${angle}deg)`;// 应用旋转变换 requestAnimationFrame(rotate);// 请求下一帧的动画回调 }rotate();// 开始动画循环} 页面使用el-button type="primary"v-bLoading="(next) = handleSubmit(next)":icon="Plus"有本事再狂点击/el-button import{Plus}from'@element-plus/icons-vue'functionhandleSubmit(next){ //模拟异步请求 setTimeout(()={ //请求返回200 next()//执行next函数，清除loading状态即可！ },3000)} 效果总结通过指令的形式，解决了重复提交的问题，遏止了代码臃于，方便复用！怎么样兄弟们，如果觉得这篇文章对你有帮助，就点赞收藏吧！ 关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文