javascript中如何同时监听一个事件和一个定时器

Question

When the page is loaded, a timer with a random limit starts. I want to trigger some actions when the timer has run out and the user has pressed a button.

Update: Only when both two conditions are satisfied will the action start.

Update 2: To be clear, if 'button clicked' is event A, 'timer goes out' is event B, then the condition is A and B, not A or B, that's a little bit counter-intuitive. (ps: release the click won't cancel event A)

const timeupEvent = new Event("timeup");

function f() {
    document.dispatchEvent(timeupEvent);
}

setTimeout(f, limit);

button.addEventListener("click", (event) => {
    document.addEventListener('timeup', action);
})

My code is shown as above. When the user clicks before the timer goes out, it runs smoothly, but when he clicks after that, the code can't run correctly.

I Believe that's because document.addEventListener('timeup', action) won't be triggered if the event is emitted before the execution of the code, but I don't have proper solutions for it.

Thanks for your help and advice!

Answer 1

Unless you actually need the timeup event you could simple check how much time has elapsed:

const pageLoadAt = Date.now();
const limit = 5000; // ms

button.addEventListener("click", (event) => {
    if (Date.now() - pageLoadAt >= limit) {
        action();
    }
});