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

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

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

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

防抖: 在必定时间内，动做只会执行一次（你们能够使用loadsh的debounce方法，也能够本身写）。举个例子：我在网上买了不少东西，今天不少快递都会到，时不时的就会有快递小哥的电话，我不想来回去取快递，就每隔1个小时取一次，若是1个小时内没有快递，就不下楼拿快递了。

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

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

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

若是您还有其余比较好的方法，欢迎留言。

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