- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想做的是让 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/
要求:用户连续扫描文本框中的作业编号,没有任何延迟。对于每个职位编号,我需要在后台调用 API 来获取扫描职位编号的详细信息。 我做了什么:我编写了一个小模拟代码来激发这个需求。我使用 setTime
我遇到了一个问题:该代码应该按该顺序输出“hi1”“hi2”“hi3”“hi4”。我写了这个简化的代码,实际代码更复杂,导致我无法删除我标记的一些功能。 function test() { c
我的页面上有一个动态创建的 iframe。像这样: var iframe = document.createElement('iframe'); iframe.setAttribute("id","m
我确信这是一个被问过很多次的通用问题,但找不到解决方案。 我有 javascript 使用 setTimeout() 函数来关闭我在设定时间后创建的弹出窗口。 问题:如果我在与创建弹出窗口的脚本相同的
我想在第一个函数完成后执行第二个函数。 结果: i: 0,i: 1,...,i: 9, j: 0,j: 1,...,j: 9 function first(callback){ for
我正在尝试创建一个按钮,以反馈其正在执行的操作。在 Angular 中,我向服务器发出一个放置请求——此时我更改按钮的状态以指示这一点——然后当我收到响应时,我再次更改按钮的状态以反射(reflect
我正在尝试制作一个字符串,它会逐个字母地写出自己直到完成句子,并且每个字母出现的速度基于从 1 到 10 不等的输入。在字符串的末尾,它会闪烁5 秒,直到外星人出现。我的想法是创建一个 setInte
在 Meteor 中,为什么要使用 Meteor.setTimeout() 而不是普通的 setTimeout()? 使用 Meteor.setTimeout() 而不是单纯的 setTimeout
我有这个代码 - function example() { var i = 0; function add() { i++; } setTimeout(
我想知道它们之间有什么区别 window.setTimeout(myFancyFunciton, 1000); 和 setTimeout(myFancyFunciton, 1000); 两者似乎都在做
好吧,我好像遇到了问题。我正在尝试创建一个twicker 来显示数据行。我正在使用 jquery/javascript 在一定时间后隐藏和显示行。代码如下: var timer_is_on
编辑:我最终想在以后使用 setTimeout 恢复变量的先前值 我创建了以下示例来说明我的观点:( JSFiddle ) Push the button Try it var x = {};
我一直在像这样在没有窗口父级的情况下使用超时: setTimeout(FUNC, 1000); 我很好奇,我应该这样使用它吗? window.setTimeout(FUNC, 1000); 有区别吗?
我有一个使用 setTimeout 函数执行动画的函数,结构如下: animation: function() { //first setTimeout(function(){ mak
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
这是一个快速的(损坏的)jsfiddle:http://jsfiddle.net/wH2qF/ 由于某种原因这不起作用...是因为我在另一个 setTimeout 的处理程序中有一个 setTimeo
我有两个 setTimouts,如下所示,根据 if 条件,我想跳过一个超时。 var batchID = []; batchID = getBatchIDs();//this function ge
我只看到一种情况我应该使用 window.setTimeout 而不是 setTimeout,当我在我的闭包,这显然不是很好的做法(除非有非常特殊的用途)。 我注意到 Google Closure 编
我看到这个用了很多,有人告诉我把函数引用放在引号之间是不好的,因为 setTimeout/setInterval evals 引用。这两者之间的实际区别是什么,以至于一个被使用在另一个之上?为什么我看
我正在使用“setTimeout”函数。此代码按预期运行: function myFunction() { console.log('test'); setTimeout(myFunc
我是一名优秀的程序员,十分优秀!