gpt4 book ai didi

javascript - 如何在 SetTimeout 之后运行另一个函数?

转载 作者:行者123 更新时间:2023-12-01 01:27:16 26 4
gpt4 key购买 nike

我想做的是让 Question2 函数在 questions 函数的 settimeout 到期时运行。我仅将 settimeout 函数放在第一个“if”语句上进行尝试和测试,但我最终会将它们放在所有语句上。任何帮助将不胜感激。

第一步是单击开始按钮,计时器启动,问题 1 通过功能问题出现。我拉出各种答案选项并将它们放入 if 函数中。如果击中正确答案,则正确答案会加 1,并且所有内容都会被隐藏,并显示问题 1 的图像附件。问题在于我想在完成第一个问题后运行 Question2 函数。任何帮助,将不胜感激。我一直并将继续进行调查,并希望能得到反馈。

$(".Start_Button").click(function() {

function countdown() {
timer = 20;
timerId = setInterval(function() {
timer--;
console.log(timer);
$(".timer").html("Timer: " +timer);
if(timer == 0) {
console.log("Time is up");
alert("Time is up!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}
}, 1000);
}
countdown();


$(".Start_Button").hide();
function questions () {
$(".list-group").show();
$(".Game").html(questions[0]);
$(".list-group-item1").html(answers1[0]);
$(".list-group-item2").html(answers1[1]);
$(".list-group-item3").html(answers1[2]);
$(".list-group-item4").html(answers1[3]);

if($(".list-group-item4").click(function(){
setTimeout(function (){
alert("you got it right!");
correct ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
question2();
})
}));

if($(".list-group-item1").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}));

if($(".list-group-item3").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}));

if($(".list-group-item4").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}));

}
questions();



function question2() {
$(".list-group").show();
$(".Game").html(questions[1]);
$(".list-group-item1").html(answers2[0]);
$(".list-group-item2").html(answers2[1]);
$(".list-group-item3").html(answers2[2]);
$(".list-group-item4").html(answers2[3]);

if($(".list-group-item2").click(function(){
alert("you got it right!");
correct ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}));

if($(".list-group-item1").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}));

if($(".list-group-item3").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}));

if($(".list-group-item4").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
}));
}

question2();

});
});

<body>

<div class = "container">
<div class = "row">
<div class = "col-md-12">
<div class = "timer">
</div>
</div>
</div>


<div class = "row">
<div class = "col-md-12">
<div class = "Game">
</div>
</div>
</div>

<div class = "row">
<div class = "col-md-12">
<div class = "answers">
<ul class="list-group">
<button class="list-group-item1"></button>
<button class="list-group-item2"></button>
<button class="list-group-item3"></button>
<button class="list-group-item4"></button>
</ul>
</div>
</div>
</div>

<div class = "row">
</div>

<div class = "row"></div>
<div class = "Start_Button">
<button type="button" class="btn btn-secondary btn-lg">Start</button>
</div>

<div class = "Photos">
<div class = "row">
<img id = "img1" src = "assets/images/map-of-asia.gif">
<img id = "img2" src = "assets/images/Flag_of_Canada.svg.png">
<img id = "img3" src = "assets/images/Antartica.jpg">
<img id = "img4" src = "assets/images/Peru.jpg">
<img id = "img5" src = "assets/images/sudan-location-map.jpg">
<img id = "img6" src = "assets/images/Alaska.jpg">
<img id = "img7" src = "assets/images/Saudi_Arabia.png">
<img id = "img8" src = "assets/images/Brazil.jpg">
</div>
</div>

</div>
</body>

最佳答案

我大概就是你的意思。尝试下面的脚本:

$(".Start_Button").click(function() {
$(".Start_Button").hide();
questions();
countdown();
});

function countdown() {
timer = 20;
timerId = setInterval(function() {
timer--;
console.log(timer);
$(".timer").html("Timer: " +timer);
if(timer == 0) {
console.log("Time is up");
alert("Time is up!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();

//call question2 here
question2();
countdown(); //reset timer again
}
}, 1000);
}

function questions () {
$(".list-group").show();
$(".Game").html(questions[0]);
$(".list-group-item1").html(answers1[0]);
$(".list-group-item2").html(answers1[1]);
$(".list-group-item3").html(answers1[2]);
$(".list-group-item4").html(answers1[3]);

$(".list-group-item4").click(function(){
setTimeout(function (){
alert("you got it right!");
correct ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
question2();
});

$(".list-group-item1").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
});

$(".list-group-item3").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
});

$(".list-group-item4").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
});
}


function question2() {

$(".list-group").show();
$(".Game").html(questions[1]);
$(".list-group-item1").html(answers2[0]);
$(".list-group-item2").html(answers2[1]);
$(".list-group-item3").html(answers2[2]);
$(".list-group-item4").html(answers2[3]);

$(".list-group-item2").click(function(){
alert("you got it right!");
correct ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
});

$(".list-group-item1").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
});

$(".list-group-item3").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
});

$(".list-group-item4").click(function(){
alert("you got it wrong!");
incorrect ++;
$("#img1").show();
$(".list-group").hide();
$(".Game").hide();
$(".timer").hide();
$(".timer").reset();
});

}

关于javascript - 如何在 SetTimeout 之后运行另一个函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53662353/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com