為什么 Javascript 函數不能按編碼順序工作？

Question

我正在為番茄技術制作一個學習計時器（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()之外返回