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

最新推荐文章于 2024-06-28 13:55:12 发布

IT大师兄吖

最新推荐文章于 2024-06-28 13:55:12 发布

阅读量1.2k

点赞数 1

分类专栏：代码随笔文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_37865166/article/details/127484491

版权

代码随笔专栏收录该内容

117 篇文章 5 订阅

订阅专栏

原文链接：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>