js设置连续点击N次才触发某个交互操作(如弹出信息面板)

NO.1
使用场景

仅在测试环境下,点击某个透明区域,连续点击N次,弹出调试信息面板

NO.2
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>
NO.3
示例效果

代码示例动态演示

 

NO.4
Tips

一些设置

  1. 连续点击时间300毫秒可以根据实际情况调整
  2. 连续点击次数N可以根据实际情况调整

还有一个附加条件

3秒内(限定总时间)连续点击5次,本文不做代码示例

END.