优雅的防止用户重复点击某个按钮

前言：想必前端小伙伴都遇到过一个问题：点击某个按钮时如果点击的比较快，可能会触发多次。如果查询操作影响还不大，如果是提交操作，那就会有问题了。接下来为大家介绍几种防止重复点击的小妙招。

基础：给请求添加 loading 效果。这个是网站必备的装逼特效，既能告诉用户系统已经在帮用户搞事情了，又可以防止用户在此期间做其他操作。

进阶(方法 1)：使用防抖。

防抖: 在一定时间内，动作只会执行一次（大家可以使用 loadsh 的 debounce 方法，也可以自己写）。举个例子：我在网上买了很多东西，今天很多快递都会到，时不时的就会有快递小哥的电话，我不想来回去取快递，就每隔 1 个小时取一次，如果 1 个小时内没有快递，就不下楼拿快递了。

建议：第一次点击立即执行，后面的点击每隔一段时间执行一次。（debounce 的 leading 设置为 true）

进阶（方法 2）：变量控制。 如果按钮和事件处理在一个组件中，那么我们可以使用变量来控制，以 react 为例：

建议使用防抖的方式，写法简单，可维护性高。

如果您还有其他比较好的方法，欢迎留言。

过几天会写 防抖 的文章，欢迎关注。