想必大家都遇到过重复点击及业务互斥的情况,一贯的习惯,可能是设置loading字段来做相应的限制,该方式在业务复杂的情况下,会需要大量的loading字段管理,很是不便。
针对这种情况,推荐大家使用一个小的工具库request-loading,该工具库可以在用户无感知的情况下防重复点击,在超长业务处理时,亦能弹出loading做等待提示。该工具业务简单,代码量少,大家也可以自行实现。
实现思路
- 用户点击"功能按钮",先弹一个透明遮罩层,将整个页面盖住,隔绝所有点击。
- 当功能异步处理时间少于loading阈值,则直接关闭遮罩层,用户无任何感知,十分友好。
- 当功能异步处理时间大于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()
})