有没有办法在点击后为整个程序设置超时？

Question

我打算做的是用户单击 test 60 秒后，用一条消息提醒用户。我将如何解决这个问题？为整个代码设置 setTimeout 不起作用。

<!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>Test your click speed | Testing</title>
    <link rel="stylesheet" href="css/test.css">
    <script src="js/test.js" defer></script>
  </head>
  <body>
    <div class ="count-div">
      <p>Count:</p>
      <p class="count"></p>
    </div>
    <div class="supercenter">
        <section class="info">
            <p class="welcome">Welcome to the test!</p>
            <p>The test shall begin in <span class="counter">5</span></p>
        </section>
        <section class="test">
            <div class="clickspace">
                <h1>Click Here</h1>
            </div>
        </section>
    </div>
  </body>
</html>

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color:#333;
    overflow: hidden;
}
body{
    background:hsla(0, 0%, 20%, 0.884);
}
.count-div{
    display: inline-block;
    padding:10px 20px;
    display:none;
}
.count-div p{
    color: white;
    display: inline;
}
.supercenter{
    height:100vh;
    display:flex; 
    justify-content:center;
    align-items:center;
}
.info{
    background-color: #ffffff;
    text-align: center;
    padding:25px;
}
p:first-child{
    font-weight: 900;
    margin-bottom: 5px;
}
p:nth-of-type(2){
    font-weight:700;
}
.test{
    display: none;
}
.clickspace{
    height:200px;
    width:200px;
    background-color:white;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    user-select: none;
    cursor: pointer;
}
.clickspace:active{
    transform:scale(1.1);
}

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;
const countDown = setInterval(() => {
    time--;
    counter.textContent = time;
    if(time<0){
        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;
})

Answer 1

test.addEventListener("click", () => {
  setTimeout(() => {
    alert("60 seconds have passed");
  }, 60000);
}

Answer 2

如果您想在每次单击按钮时取消以前运行的任何计时器，您可以设置一个变量来保存超时 ID 并将其清除。

let clickTimeout
let test = document.querySelector('button');
test.addEventListener("click",()=>{
    clearTimeout(clickTimeout)
    clickTimeout = setTimeout(() => {
       alert("60 seconds have passed");
    }, 60000);
})

<button>click</button>

Answer 3

将事件处理程序绑定一次，它只会被调用一次。

const test = document.getElementById("test");
test.addEventListener("click", () => {
  setTimeout(() => {
    alert("done");
  }, 2000 /*60000*/);
}, {once: true});

<button type="button" id="test">Click</button>

或者使用布尔值

let clicked = false;
const test = document.getElementById("test");
test.addEventListener("click", () => {
  if (!clicked) {
    setTimeout(() => {
      alert("done");
    }, 2000 /*60000*/);
    clicked = true;
  }
});

<button type="button" id="test">Click</button>

有没有办法在点击后为整个程序设置超时？

Is there a way to set a timeout for the entire program after a click?

javascript

settimeout

setinterval