【分享代码】JS实现防止重复点击

作者: 龙哥 分类: 技术 发布时间: 2023-02-14 18:48 ė1,040 次浏览

防止重复点击:

定义一个clickThrottle.js文件

/* 防止重复点击 */
let clickTimer = 0

function clickThrottle(interval = 3000) {
    let now = +new Date(); // 获取当前时间的时间戳
    let timer = clickTimer; // 记录触发事件的事件戳
	
    if (now - timer < interval) {
    	// 如果当前时间 - 触发事件时的事件 < interVal,那么不符合条件,直接return false,
    	// 不让当前事件继续执行下去
        return false;
    } else { 
    	// 反之,记录符合条件触发了事件的时间戳,并 return true,使事件继续往下执行
        clickTimer = now;
        return true;
    }
}

export default clickThrottle

+new Date()这个代码是获得当前时间的时间戳,与 new Date().getTime() 、 new Date().valueOf() 以及 Date.now() 是一样的。

调用:

先将防止重复点击的js文件引入;

两种调用方式(自行看项目需求决定):

1、使用防重复点击事件默认参数值3000,3秒内该事件不会继续执行下去;

// 这是一个提交事件
handleSubmit() {
	if(!clickThrottle()) return;
	// doing
	// 调用提交保存接口
}

2、修改防重复点击事件默认参数值,5秒内该事件不会继续执行下去。

// 这是一个提交事件
handleSubmit() {
	if(!clickThrottle(5000)) return;
	// doing
	// 调用提交保存接口
}

本文出自 俞凌龙博客,转载时请注明出处及相应链接。

本文永久链接: https://blog.jlwz.cn/379

Ɣ回顶部