编辑：有人告诉我提供更多代码，以便更好地理解。我尝试制作反馈卡，在您单击“发布”后，我希望您有 10 秒钟的时间按“编辑”来编辑您的反馈，否则它将重新启动为新的。因此，通过这种方式，您可以在同一天提供更多反馈。当我按编辑时，我的功能仍在工作，几秒钟后我得到了一张新的反馈卡。当我按下编辑时我需要编辑它，当我等待 10 秒时我需要一张新的反馈卡。我希望你现在明白了，我尝试了很多东西，但我没有得到任何解决方案。
我试图以特殊顺序显示某些东西，但我的功能 cho 与 haha 同时开始。有人可以告诉我我做错了什么吗？我怎样才能延迟 cho 功能在 haha 之后启动？
这是我到目前为止所做的：Html：
var btn= document.getElementById('btn1');
var post= document.getElementById('post');
var widget= document.getElementById('star-widget');
var editBtn= document.getElementById('exit');
var x=document.getElementsByTagName("input");
var y=document.getElementsByTagName("label");
var z;
function H(){
widget.style.display="none";
post.style.display="block";
editBtn.onclick=()=>{
widget.style.display="block";
post.style.display="none";
z=true;
return false;
}
if(z==true){
}else{
console.log("Before setTimeout");
setTimeout(function() {
Haha();
}, 1000);
function Haha() {
console.log("Start Haha");
widget.style.display = "none";
post.style.display = "block";
z = false;
setTimeout(function() {
cho();
setTimeout(function() {
done();
}, 1000);
}, 1000);
}
function cho() {
console.log("Start cho");
widget.style.display = "block";
post.style.display = "none";
x[0].checked = false;
x[1].checked = false;
x[2].checked = false;
x[3].checked = false;
x[4].checked = false;
y[0].checked = false;
y[1].checked = false;
y[2].checked = false;
y[3].checked = false;
y[4].checked = false;
z = false;
}
function done(){
console.log("After setTimeout");
}
}
}.container{
width: 400px;
background: #111;
padding: 20px 30px;
border: 1px solid #444;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container #star-widget input{
display: none;
}
#star-widget label{
font-size:40px;
color: #444;
padding: 10px;
float:right;
transition: all 0.2s ease;
}
#star-widget input:not(:checked) ~ label:hover, #star-widget input:not(:checked) ~ label:hover ~ label{
color: #fd4;
}
#star-widget input:checked ~ label{
color: #fd4;
}
#star-widget input#rate-5:checked ~ label{
color: #fe3;
text-shadow: 0px 0 20px #952;
}
#star-widget input#rate-4:checked ~ label{
color: #fd4;
text-shadow: 0px 0 20px #952;
}
#star-widget input#rate-3:checked ~ label{
color: #fc4;
text-shadow: 0px 0 20px #952;
}
#star-widget input#rate-2:checked ~ label{
color: #fb4;
text-shadow: 0px 0 20px #952;
}
#star-widget input#rate-1:checked ~ label{
color: #fa4;
text-shadow: 0px 0 20px #952;
}
.container form{
display: none;
}
.container .text1{
margin-top: 20px;
font-size: 25px;
color: #a8ac4e;
font-weight: 500;
text-align: center;
}
.container #exit{
font-size: 20px;
height: 10px;
cursor: pointer;
color: #a8ac4e;
margin-left: 340px;
font-weight: 500;
float: right;
}
.container #post{
display: none;
height: 60px;
vertical-align: auto;
}
input:checked ~ form{
display: block;
}
form header{
width: 100%;
font-size: 25px;
color: #fe7;
font-weight: 500;
margin: 70px 0 20px 0;
float: inherit;
text-align: center;
}
#rate-1:checked ~ form header:before{
content: "I hate it! ";
}
#rate-2:checked ~ form header:before{
content: "I don't like it! ";
}
#rate-3:checked ~ form header:before{
content: "Is it awesome! ";
}
#rate-4:checked ~ form header:before{
content: "I just like it! ";
}
#rate-5:checked ~ form header:before{
content: "I love it! ";
}
form .textarea{
width: 325px;
height: 100px;
overflow: hidden;
}
form .textarea textarea{
width: 100%;
height: 100%;
outline: none;
border: 2px solid #444;
background: #333;
padding: 10px;
font-size: 17px;
color: lavender;
font-family: "Heebo", sans-serif;
resize: none;
}
.textarea textarea:focus{
border-color: rgb(233, 230, 47);
}
form #btn1{
height: 40px;
width: 80px;
margin: 15px 0 15px 100px;
}
form #btn1 button{
height: 100%;
width: 100%;
background: #00997a;
color: black;
font-family: "Heebo", sans-serif;
border: none;
}
form #btn1 button:hover{
background: #1b1b1b;
}<!DOCTYPE html>
<html>
<head>
<title>My page smecher</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css" />
<link
href="https://fonts.googleapis.com/css2?family=Heebo:wght@500;700&family=Lobster&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<div class="container">
<div id="post">
<div id="exit">EDIT</div>
<div class="text1">Thank you for rating us!</div>
</div>
<div id="star-widget">
<input type="radio" name="rate" id="rate-5">
<label for="rate-5" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-4">
<label for="rate-4" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-3">
<label for="rate-3" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-2">
<label for="rate-2" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-1">
<label for="rate-1" class="fas fa-star"></label>
<script src="js/java2.js"></script>
<form action="#">
<header></header>
<div class="textarea">
<textarea cols="30" placeholder="Describe your experience..."></textarea>
</div>
<div id="btn1">
<button onClick='H()' type="submit">Post</button>
</div>
</form>
</div>
</div>
</body>