原文链接:https://dsx2016.com/?p=3153
公众号:大师兄2016
使用场景
仅在测试环境下,点击某个透明区域,连续点击N次,弹出调试信息面板
js代码示例
单页html测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clickContinuity</title>
</head>
<body>
<button onclick="clickContinuity()">连续点击</button>
</body>
<script>
// 设置定时器
let timer = null
// 设置初始点击计数
let clickCountNow = 0
// clickTatgatNum(连续点击N次触发xxx)
function clickContinuity(clickTatgatNum = 5) {
// 连续点击次数小于指定次数时
if (clickCountNow < clickTatgatNum - 1) {
// 清除定时器
if (timer) {
clearTimeout(timer)
timer = null
}
// 点击次数+1
clickCountNow++
// 打印次数日志
console.log(`clickCountNow`, clickCountNow)
// 设置定时器,大于300毫秒点击不算连续点击
timer = setTimeout(() => {
clickCountNow = 0
}, 300)
} else {
// 点击次数+1(此时已大于等于指定点击次数)
clickCountNow++
// 打印日志
console.log(`连续点击了${clickCountNow}次`, `做点什么`)
// 清除定时器
if (timer) {
clearTimeout(timer)
timer = null
}
// 点击次数归零,重新计数
clickCountNow = 0
}
}
</script>
</html>
示例效果
代码示例动态演示
Tips
一些设置
- 连续点击时间300毫秒可以根据实际情况调整
- 连续点击次数N可以根据实际情况调整
还有一个附加条件
3秒内(限定总时间)连续点击5次,本文不做代码示例
END.