点击test元素后设置全局超时实现60秒弹窗提示的实现方案咨询

问题原因 #

你直接在全局写setTimeout不生效，是因为全局的定时器会在脚本加载完成后立刻开始倒计时，而不是等待用户点击test元素才触发计时，同时如果不对定时器做重复触发限制，每次点击都会新开一个定时器，也会导致逻辑混乱。

实现方案 #

仅需要修改你的JS部分代码即可实现需求，结合你这个点击速度测试的场景，默认逻辑为用户首次点击测试区域后启动60秒倒计时，结束后弹出总点击数，修改后的完整JS代码如下：

const welcome = document.querySelector(".welcome");
const counter = document.querySelector(".counter");
const info = document.querySelector(".info");
const test = document.querySelector(".test");
let countEl = document.querySelector(".count")
let countDiv = document.querySelector(".count-div")
let time = 5;
let count = 0;
let total = 0;
let timer = 0;
// 新增标记位：判断60秒计时是否已经启动，避免重复触发
let isCountStart = false;

const countDown = setInterval(() => {
    time--;
    counter.textContent = time;
    if(time<0){
        clearInterval(countDown) // 清除初始的5秒倒计时定时器，避免内存泄漏
        counter.textContent = "0"
        info.style.display = "none";
        test.style.display = "contents"
        countDiv.style.display = "contents"
    }
},1000)

test.addEventListener("click",()=>{
    count++; 
    total=count;
    countEl.textContent=total;
    // 首次点击时启动60秒定时器
    if(!isCountStart){
        isCountStart = true
        setTimeout(()=>{
            alert(`测试结束！你的总点击次数是：${total}`)
            // 可选：测试结束后禁止继续点击，避免计数异常
            test.style.pointerEvents = 'none'
        }, 60 * 1000)
    }
})

如果你的需求是每次点击test元素都单独触发一次60秒后的提示，只需要删除isCountStart相关的标记判断逻辑即可，每次点击都会新开一个独立的定时器。

内容的提问来源于stack exchange，提问作者Reuben Menezes