为什么Javascript函数不能按编码顺序工作？

Question

我正在为Pomodoro技术制作一个学习计时器(25分钟学习5分钟休息)。我的计时器只有在我调用它一次时才起作用。如果我调用它两次或更多，它会倒计时到负的分钟和秒。此外，当我先调用学习计时器，然后再调用中断计时器时，它会执行中断计时器并跳过学习计时器。

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)
}

这是一个循环

for(var t=1;t<=loop;t++){
        studying();
        breaking();
    }

Answer 1

这是因为setInterval内部的回调是“异步”运行的，为了解决这个问题，你可以结合使用Promises和Async/Await。你可以像这样写一段很棒的代码：

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();

这一次，studying()将首先执行，然后按该顺序执行breaking()。

这里的魔术是由await完成的，它的基本意思是：“在这里等待，直到studying()内部的任何异步进程完成”，还有resolve()：它表示异步进程已经完成，控制应该返回到studying()之外