JavaScript：在单击事件时中断 promise 中的 setTimeout()

Question

这是我面临的问题的非常简化的再现：

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>

我基本上想要的是：

• 如果我点击按钮， mains()将立即运行
• 如果我不这样做， setTimeout()会为我等待 1.5 秒。 在这段时间内，如果我单击， setTimeout()将重置并执行mains()
• 如果我仍然不点击，则执行alert("game over") 。 “自我回调循环”中断

但是，每当我单击时， mains() function 不会立即运行，而是等待超时，导致每次单击后延迟 1.5 秒。

自然地，解决方案是使用clearTimeout() ，但是，我似乎不知道在哪里使用它。 将它添加到事件侦听器的 function 参数中会导致超时独立于单击事件运行，并使其在 1.5 秒后拒绝 promise，尽管我单击了按钮。 我还尝试在事件侦听器 function 中调用 function 本身，但这不起作用。 将它添加到if(touchme.dataset.clicked == "true")内setTimeout()外和 promise 内是行不通的，因为我的初始值为false ，所以它只检查初始 state。

Answer 1

你真的不需要为此使用承诺，只需一个简单的处理程序 function 就可以更容易地清除和重置超时：

 let lost = false; function timeoutHandler() { alert("game over"); lost = true; } let timeout = setTimeout(timeoutHandler, 1500); document.getElementById('click').addEventListener('click', () => { if (lost) return; clearTimeout(timeout); timeout = setTimeout(timeoutHandler, 1500); });

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

Answer 2

这为Promise.race提供了一个很好的用例：

 async function main() { while (await game()) {} } async function game() { let clickPromise = new Promise(res => document.querySelector('button').onclick = () => res(true)) let timerPromise = new Promise(res => setTimeout(() => res(false), 1500)) let ok = await Promise.race([clickPromise, timerPromise]) document.querySelector('button').textContent = ok? 'keep clicking ' + Math.random(): 'game over' return ok } window.onload = main

 <button>click</button>