prevent-repeat-click.js

简介

prevent-repeat-click 是一个按钮防重复点击的一个小工具。

安装

npm install prevent-repeat-click --save

使用

引入

导出两个函数

• syncPreventRepeatClick 是同步任务的防重复
• asyncPreventRepeatClick 是异步任务的防重复

import { syncPreventRepeatClick, asyncPreventRepeatClick } from 'prevent-repeat-click'

js

<button id="button-sync">同步任务防重复测试</button>
<button id="button-async">异步任务防重复测试</button>

function syncSubmit() {
  console.log('同步提交成功')
}
function asyncSubmit() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('异步提交成功')
      resolve()
    }, 3000)
  })
}
document.getElementById('button-sync').onclick = () => {
  syncPreventRepeatClick(syncSubmit)
}
document.getElementById('button-async').onclick = () => {
  asyncPreventRepeatClick(asyncSubmit)
}

VUE

// main.js
Vue.prototype.$syncPreventRepeatClick = syncPreventRepeatClick
Vue.prototype.$asyncPreventRepeatClick = asyncPreventRepeatClick

<el-button @click="$syncPreventRepeatClick(syncSubmit)">同步任务防重复测试</el-button>
<el-button @click="$asyncPreventRepeatClick(asyncSubmit)">异步任务防重复测试</el-button>

methods: {
  syncSubmit () {
    console.log('同步提交成功')
  },
  asyncSubmit () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('异步提交成功')
        resolve()
      }, 3000)
    })
  },
}

REACT

参考上面 js

参数说明

syncPreventRepeatClick(method_name, [delay], [params])
asyncPreventRepeatClick(method_name, [delay], [params])

| 参数名 | 说明 | 是否必填 | 类型 | 默认值 | | ----------- | ------------------------------------------------- | -------- | ------ | ------ | | method_name | 需要执行的函数名，注意异步函数需要返回一个promise | 是 | String | - | | delay | 多少毫秒后可以下一次点击 | 否 | Number | 500 | | params | 给函数传递的参数 | 否 | any | - |

测试

http-server

访问： http://localhost:8081/test/index

可以看到双击提交按钮，只会触发一次‘提交成功’