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

想必大家都遇到过重复点击及业务互斥的情况，一贯的习惯，可能是设置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及遮罩]

工具安装

npm地址

# 使用npm
npm i -S request-loading
# 使用yarn
yarn add request-loading

用法

样例地址

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

Loading.show()

http.get('/user/info').finally(() => {
  Loading.hide()
})