[英]Why Javascript functions don't work in the coded order?
I'm making a studying timer for the Pomodoro technique (25 min studying 5 min breaking).我正在为番茄技术制作一个学习计时器(25 分钟学习 5 分钟休息)。 My timer works only when I called it once.
我的计时器仅在我调用一次时才有效。 If I call it twice or more, it count down to negative minutes and seconds.
如果我调用它两次或更多次,它会倒计时到负分和秒。 Moreover, when I called the studying timer first and the breaking timer later, it executes the breaking timer and skips the studying timer.
此外,当我先调用学习计时器然后调用中断计时器时,它会执行中断计时器并跳过学习计时器。
let timer;
function studying(){
display_quote();
var min = document.getElementById("study-min").value;
document.getElementById("state").innerHTML = "STUDYING";
var sec = min*60;
timer = setInterval(function(){
minn = Math.floor(sec/60);
secc = sec%60;
document.getElementById("clock").innerHTML = getTime(minn,secc);
sec-=1;
if(sec==-1){
clearInterval(timer);
return;
}
},1000)
}
function breaking(){
display_quote();
min = document.getElementById("break-min").value;
document.getElementById("state").innerHTML = "BREAKING";
sec = min*60;
timer = setInterval(function(){
minn = Math.floor(sec/60);
secc = sec%60;
document.getElementById("clock").innerHTML = getTime(minn,secc);
sec-=1;
if(sec==-1){
clearInterval(timer);
return;
}
},1000)
}
and here is the looping这是循环
for(var t=1;t<=loop;t++){
studying();
breaking();
}
That happens because callbacks inside setInterval
are running "asynchronously", to solve this you could use Promises along with Async/Await .发生这种情况是因为
setInterval
中的回调正在“异步”运行,为了解决这个问题,您可以使用Promises和Async/Await 。 You could have a sweet code like this:你可以有一个像这样的甜蜜代码:
let timer;
async function studying() {
display_quote();
let promise = new Promise((resolve, reject) => {
var min = document.getElementById("study-min").value;
document.getElementById("state").innerHTML = "STUDYING";
var sec = min * 60;
timer = setInterval(function () {
minn = Math.floor(sec / 60);
secc = sec % 60;
document.getElementById("clock").innerHTML = getTime(minn, secc);
sec -= 1;
if (sec == -1) {
clearInterval(timer);
resolve();
return;
}
}, 1000);
});
return promise;
}
async function breaking() {
display_quote();
let promise = new Promise((resolve, reject) => {
min = document.getElementById("break-min").value;
document.getElementById("state").innerHTML = "BREAKING";
sec = min * 60;
timer = setInterval(function () {
minn = Math.floor(sec / 60);
secc = sec % 60;
document.getElementById("clock").innerHTML = getTime(minn, secc);
sec -= 1;
if (sec == -1) {
clearInterval(timer);
resolve();
return;
}
}, 1000);
});
return promise;
}
async function doJob() {
let loop = 5;
for (var t = 1; t <= loop; t++) {
await studying();
await breaking();
}
}
doJob();
This time studying()
is going to execute first and then breaking()
in that order.这次
studying()
将首先执行,然后按顺序breaking()
。
The magic here is done by await
which basically means: "wait here until any asynchronous process inside studying()
is complete", and resolve()
: which indicates that the asynchronous process is complete and the control should be returned outside studying()
这里的魔法是由
await
完成的,它基本上意味着:“在这里等待,直到studying()
内部的任何异步过程完成”,以及resolve()
:这表明异步过程已经完成,控制权应该在studying()
之外返回
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.