prevent-multiple-clicks

描述

阻止多次点击插件，本文以react为例

安装

npm install prevent-multiple-clicks --save-dev

使用

import PreventClick from "prevent-multiple-clicks"
...
click() {
  if(PreventClick.stop("key")) return;
 
  console.log("开始调接口");
  // setTimeout 模拟调接口
  setTimeout(() => {
    console.log("完成");
    PreventClick.start("key");
  }, 1000);
}
...
<p onClick={() => {this.click()}}>按钮</p>

API

.stop(key)

阻止点击（只有第一次点击事件生效）

• key{string} 一个点击事件唯一的key值

.start(key[, delay])

按钮可以点击，用于.stop(key)解除

• key{string} 一个点击事件唯一的key值
• delay{number} 再次点击等待的时间

.getAll()

获取所有的值，可用于loading

.get(key)

获取单个值

.remove(key)

删除单个值

.clearAll(key)

清除所有的值

使用loading

import PreventClick from "prevent-multiple-clicks"
...
this.state = {
  loading: PreventClick.getAll()
};
...
click() {
  if(PreventClick.stop("key")) return;
 
  this.setState({
    loading: PreventClick.getAll()
  });
  console.log("开始调接口");
  // setTimeout 模拟调接口
  setTimeout(() => {
    console.log("完成");
    PreventClick.start("key");
    this.state = {
      loading: PreventClick.getAll()
    };
  }, 1000);
}
...
<p onClick={() => {this.click()}}>按钮</p>
<span>
  { loading["key"] ? "loading" : "加载完了" }
</span>

使用demo

git close https://github.com/kszitt/prevent-multiple-clicks.git
npm install
npm start

打开http://localhost:3000，template/home.js是具体的代码