掘金好文 | 你还在提交按钮上面用防抖函数？

摘要：在日常开发中会涉及到各种按钮请求，测试人员经常怼着一个按钮狂点不止。这样导致很多数据重复提交！

在日常开发中会涉及到各种按钮请求，测试人员经常怼着一个按钮狂点不止。这样导致很多数据重复提交！

「测试回怼」：我不知道点击有没有成功呀！所以多点几次咯~

「项目经理」：这是个 BUG，你们前后端开发商量一下看怎么修复吧！

「后端人员」：这不是我的问题，请求慢我没办法。。前端发生的事，找前端吧！

那既然这么喜欢围着按钮狂点，那就加防抖呗！

//伪代码有本事再狂点击 //省略...debounce的实现 const handleSubmit = debounce(submit,1000)

加防抖看似解决了问题了。。没想到过了几天！测试又在提 BUG...

「测试」: 兄弟，我咋还是重复提交了 2 条数据啊！

「前端」：你又搞了什么骚操作？点了几下啊！

「测试」：跟上次一样啊，我作死的在点。。

「前端」：把游览器 F12 打开，我过来看一下吧！哎~

经过两人抓头排查，问题出现了：由于防抖函数设置的时间是 1 秒，后端接口返回的时间是 5 秒。。测试兄弟在这 5 秒内狂点了 100 多下。。（真是 5 秒真男人啊）

还是加按钮 Loading 吧

最后没办法了，只能通过请求之前给按钮加一个 loading 禁用状态，等接口返回 200 再清除 loading 了！

//伪代码有本事再狂点击 let loading = false function handleSubmit{ loading = true //开启loading ajax('xxx/xxx/xxx').then(res=>{ if(res.code == 200){ loading = false //关闭loading } }) }

这下就完美解决了测试兄弟的 BUG！可是又面临一个开发问题，就是如果很多地方要用到提交，是不是每个页面都去写一个 loading 变量啊！

接下来就是重头戏了，咱们把它封装成一个 vue 指令吧！

//入口文件main.jsimport { createApp } from 'vue'import App from './App.vue'import { bLoading } from './permission/loading'const app = createApp(App)bLoading(app) //全局注册//bLoading.jsimport type { App } from 'vue'let tag = const className = ` //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; }`//核心代码export function bLoading(app: App) { app.directive('bLoading', (el, binding) => { if (typeof binding.value !== 'function') { throw new Error('Directive value must be a function') } el.addEventListener('click', => { addNode(el) //添加loading图标 setTimeout( =>{ //执行异步函数 binding.value( => { cleanNode(el) //清除loading }) }) //延迟执行异步函数 }) })}//新增loading图标function addNode(el) { if (el.firstElementChild.tagName === 'I') { //如果按钮上面自带图标，就先移除 tag = el.firstElementChild; el.removeChild(el.firstElementChild) el.insertAdjacentHTML('afterbegin', i) } else { } el.setAttribute('disabled', true) rotate('loading')}//清除loading图标function cleanNode(el) { el.removeAttribute('disabled') if (el.firstElementChild) { el.removeChild(el.firstElementChild); if (tag) { el.prepend(tag) } }}//图标旋转动画function rotate(id) { const element = document.getElementById(id); let angle = 0; // 初始角度为0度 const speed = 2; // 旋转速度，单位为度/帧（例如，每帧旋转2度） function rotate { angle = (angle + speed) % 360; // 确保角度在0到360之间循环 element.style.transform = `rotate(${angle}deg)`; // 应用旋转变换 requestAnimationFrame(rotate); // 请求下一帧的动画回调 } rotate; // 开始动画循环} handleSubmit(next)" :icon="Plus">有本事再狂点击import { Plus } from '@element-plus/icons-vue'function handleSubmit(next){ //模拟异步请求 setTimeout(=>{ //请求返回200 next //执行next函数，清除loading状态即可！ },3000)}效果