点击事件中重置Promise内的setTimeout问题求助

需求 #

• 点击按钮时，立即执行mains()
• 未点击时，setTimeout()等待1.5秒；若在此期间点击，则重置setTimeout()并执行mains()
• 若仍未点击，执行alert("game over")，终止循环

当前问题 #

点击按钮后mains()不会立即执行，需等待1.5秒后才触发，每次点击都有延迟。尝试使用clearTimeout()但未找对正确位置。

原代码 #

JavaScript代码 #

window.onload=function(){
    touchme = document.getElementById('click');
    function mains(){
        touchme.innerHTML = "clicked " + Math.random().toString();
    }
    function process() {
        touchme.dataset.clicked = "false";
        mains();
        touchme.addEventListener("click", () => {
            touchme.dataset.clicked = "true";
        }, {once : true});

        let clickPromise = new Promise((resolve, reject) => {
            var timer = setTimeout(() => {
                if(touchme.dataset.clicked == "true"){
                    resolve();
                }
                else{
                    reject();
                }
            }, 1500);
        });
        
        clickPromise.then(() => { 
            process();
        });

        clickPromise.catch(() => {
            alert("game over");
        });
    }

    process();
}

HTML代码 #

<body><button id="click">Click</button></body>

修正后的代码 #

window.onload = function() {
    const touchme = document.getElementById('click');
    let timerId; // 存储定时器ID，用于后续清除

    function mains() {
        touchme.innerHTML = "clicked " + Math.random().toString();
    }

    function startTimer() {
        // 清除已有定时器，避免多个定时器同时运行
        if (timerId) clearTimeout(timerId);
        // 重新设置1.5秒超时
        timerId = setTimeout(() => {
            alert("game over");
            // 游戏结束后移除点击事件，防止后续无效操作
            touchme.removeEventListener('click', handleClick);
        }, 1500);
    }

    function handleClick() {
        mains(); // 点击后立即执行更新逻辑
        startTimer(); // 重置超时定时器
    }

    // 初始化流程：先执行一次更新，启动定时器，绑定点击事件
    mains();
    startTimer();
    touchme.addEventListener('click', handleClick);
}

关键修正点 #

1. 简化逻辑：去掉原代码中Promise的冗余设计，直接用定时器ID管理超时状态，逻辑更清晰。
2. 立即响应点击：点击事件回调中第一时间调用mains()，满足“点击即执行”的需求。
3. 正确重置定时器：每次点击时先清除之前的定时器，再重新设置新的超时，确保超时时间从点击时刻重新计算。
4. 清理收尾：超时触发游戏结束后，移除点击事件，避免用户后续点击继续触发无效逻辑。

内容的提问来源于stack exchange，提问作者Abdullah Omar Nasseef