背景
前端在做隐藏功能的时候,时不时会用到一些特殊的触发事件。就好比说,连续点击某个位置触发。
原理
记录每次点击的时间,判断此次点击与上一次点击时间差,若时间差是允许的话则为有效连击(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)
}