连续点击事件

背景

前端在做隐藏功能的时候,时不时会用到一些特殊的触发事件。就好比说,连续点击某个位置触发。

原理

记录每次点击的时间,判断此次点击与上一次点击时间差,若时间差是允许的话则为有效连击(numClick++),否则就清除连击次数(numClick=1)。当连击次数累计到指定数值时触发事件。

实现代码

let timer = null;	// 定时器
const waitTime = 300;	// 允许间隔时间(单位:ms)
let  = 0;	// 连击累计次数
let lastTime = new Date().getTime(); // 上次点击时间

function comboPoint(){
	let currTime = new Date().getTime(); // 当前点击时间
	numClick = (currTime - lastTime) <= waitTime ? numClick++ : 1
	lastTime = currTime
	clearTimeout(timer);
    timer = setTimeout(function () {
		clearTimeout(timer);
		// 处理点击事件
		if (numClick > 4) {
			// 连续点击五次或者五次以上的点击事件
				console.log('点击超过4次了')
      }
    }, waitTime)
}

猜你喜欢

转载自blog.csdn.net/zxsy19966/article/details/124443020