防止连续点击触发多次事件

freeze-click

author: bugszhou | Email:bugszhou@outlook.com
description: 防止多次点击

freeze-click(冻结点击):在用户点击一个按钮时,为了节流保证用户在接口返回后,再次点击才触发下一次请求

Usual 默认冻结10s,10s内只请求一次,需要手动调用cancel取消冻结才能发送第二次请求。未调用cancel将在60s后自动释放。 install

npm install --save freeze-click; Use

import freezeClick from 'freeze-click'; const handleClick = freezeClick((t) => { //t 为freeze-click实例 setTimeout(() => { console.log('click'); }, 5000); }); // just call one time handleClick(); handleClick(); handleClick(); setTimeout(() => { handleClick(); // call again }, 6000); freezeClick(func, [freezeTime=60*1000])

const freezeFn = freezeClick(func, 10000);

创建并返回一个冻结函数,在 freezeTime(默认60*1000ms,单位ms) 秒内最多执行 func 一次的函数。 在执行func(freezeFnObj)函数时,会把冻结函数的实例(freezeFnObj)作为第一个参数,freezeFnObj含有 cancel 方法用于取消延迟的函数。

例如:

const handleClick = freezeClick((freezeFnObj) => { //t 为freeze-click实例 setTimeout(() => { console.log('click'); freezeFnObj.cancel() }, 5000); }); handleClick(); setTimeout(() => { handleClick(); // call again }, 5100); 参数

func(Function): 需要冻结的函数,第一个参数为freezeFnObj含有 cancel 方法用于取消延迟的函数。 freezeTime(number): 需要冻结的时间,单位ms

返回

(Function): 冻结后的函数

setWaitTime(wait = 10 * 1000)

修改冻结时间

import {setWaitTime} from 'freeze-click'; setWaitTime(500);

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。