前端如何优雅的处理重复点击

想必大家都遇到过重复点击及业务互斥的情况,一贯的习惯,可能是设置loading字段来做相应的限制,该方式在业务复杂的情况下,会需要大量的loading字段管理,很是不便。

针对这种情况,推荐大家使用一个小的工具库request-loading,该工具库可以在用户无感知的情况下防重复点击,在超长业务处理时,亦能弹出loading做等待提示。该工具业务简单,代码量少,大家也可以自行实现。

实现思路

  1. 用户点击"功能按钮",先弹一个透明遮罩层,将整个页面盖住,隔绝所有点击。
  2. 当功能异步处理时间少于loading阈值,则直接关闭遮罩层,用户无任何感知,十分友好。
  3. 当功能异步处理时间大于loading阈值,则展示loading图文,让用户感知到在处理业务中,给以友好的提示,当业务处理完时,关闭loading图文及遮罩层。
graph TD A[点击功能] --> B[弹出遮罩] B --> C{业务时长超出阈值} C -->|否| D[弹出loading] C -->|是| E[业务结束] D --> E E --> F[关闭loading及遮罩]

工具安装

查看地址

bash 复制代码
# 使用npm
npm i -S request-loading
# 使用yarn
yarn add request-loading

用法

ts 复制代码
// 需要引入全局样式
import Loading from 'request-loading'
import 'request-loading/dist/index.css'

Loading.show()

http.get('/user/info').finally(() => {
  Loading.hide()
})
相关推荐
秋天的一阵风21 分钟前
GeekGeekRun:求职路上的开源神器🚀🚀🚀
前端·面试·求职
yinuo23 分钟前
实现二维码扫码器动画效果
前端
八岁小孩学编程39 分钟前
Figma多语言JSON的解决方案:手把手打造React Figma AI Chrome扩展
前端·react.js·ai编程
pe7er42 分钟前
使用 force-resolutions 强制锁定 npm/yarn 依赖版本
前端·javascript
JinSo1 小时前
EasyDashboard 数据源功能来啦!
前端·javascript·github
Mike_jia1 小时前
Netdata:实时监控领域的“超音速战机”——从零构建企业级运维观测体系
前端
Mike_jia1 小时前
RustDesk:开源远程桌面的颠覆者——从极简部署到企业级实战全解析
前端
晓得迷路了1 小时前
栗子前端技术周刊第 86 期 - React Native 0.80、Bun v1.2.16、Astro 5.10...
前端·javascript·bun
JustHappy1 小时前
「web前端性能优化慢聊🚀」从域名到IP,咱切图仔可以做啥?—— DNS解析优化慢聊
前端
心.c1 小时前
React基础
前端·javascript·react.js