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

【问题标题】：Is there a way to set a timeout for the entire program after a click?点击后有没有办法为整个程序设置超时？
【发布时间】：2022-01-01 07:23:21
【问题描述】：

我打算做的是在用户点击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;
})

【问题讨论】：

请添加您的 HTML。
那么把setTimeout放在点击里面？
您好！我刚刚添加了 HTML 和 CSS
那么消息是否显示一次？消息是否显示多次？消息是否多次显示，但在第一个之后（也就是在第一个被点击后又等待 60 次）？您需要在您期望的基础上添加更多内容，以便人们知道正确的编码方式。
消息应该显示一次。您可以在clickspeedtest.com 观看此演示

标签： javascript settimeout setinterval

【解决方案1】：

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

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

&lt;button type="button" id="test"&gt;Click&lt;/button&gt;

或者使用布尔值

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

&lt;button type="button" id="test"&gt;Click&lt;/button&gt;

【讨论】：

嘿！感谢您的回答。出于好奇，哪种方法会更好？
视情况而定。如果你想重用它，你需要重新绑定一个事件。第二个你只需要重置布尔值。
好的！非常感谢您的帮助。欣赏它。

【解决方案2】：

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

【讨论】：

如果用户一直点击按钮会怎样？
@RyanWilson 每次点击后 60 秒都会显示警报
我不确定是否需要多次触发alert。
@RyanWilson 你在做假设:)
@epascarello 可以说同样的答案。 :)

【解决方案3】：

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

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

&lt;button&gt;click&lt;/button&gt;

【讨论】：