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

想必大家都遇到过重复点击及业务互斥的情况,一贯的习惯,可能是设置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()
})
相关推荐
TE-茶叶蛋9 分钟前
React-props
前端·javascript·react.js
安分小尧10 分钟前
[特殊字符] 超强 Web React版 PDF 阅读器!支持分页、缩放、旋转、全屏、懒加载、缩略图!
前端·javascript·react.js
EndingCoder12 分钟前
React从基础入门到高级实战:React 高级主题 - React Concurrent 特性:深入探索与实践指南
前端·javascript·react.js·前端框架
EndingCoder13 分钟前
React从基础入门到高级实战:React 生态与工具 - React Query:异步状态管理
前端·javascript·react.js·前端框架
TE-茶叶蛋14 分钟前
ReactJS 中的 JSX工作原理
前端·react.js·前端框架
水煮白菜王15 分钟前
React 编译器
前端·react.js·前端框架
霸王蟹15 分钟前
React 项目中封装 Excel 导入导出组件:技术分享与实践
前端·笔记·学习·react.js·typescript·excel·vite
wl_16 分钟前
react-color-palette源码解析
前端·react.js·调色板
集成显卡21 分钟前
图片压缩工具 | Electron+Vue3+Rsbuild开发桌面应用
前端·javascript·electron·vue
赵庆明老师25 分钟前
webpack打包基本配置
前端·webpack·node.js