如何使函数在 JS 中按顺序调用？

Question

我正在制作一个网页，一旦用户点击开始按钮，页面的 CSS 就会发生一些变化（我写了所需的 JavaScript（JS）代码）。只有在这些变化发生之后，我才希望发生一些其他的变化。为了实现这一点，我在事件发生后调用的函数中编写了对 2 个函数的调用：（在下面的 JS 代码中，这 2 个函数开始在由“点击”事件触发的函数内部调用- startCountdown 和 showWords)

document.getElementById("startButton").addEventListener("click",startTheGame);
function startTheGame()
{
    var contentSlides = document.getElementsByClassName("slide");
    // Game started so we are hiding the start slide!
    contentSlides[0].classList.add("hideDisplay"); 
    //
    // Now the "321 Go!" down timer is to be shown!
    contentSlides[1].classList.remove("hideDisplay");
    startCountdown(document.getElementById("onClickCount"));
    showWords();
    //
}
function startCountdown(reqElement)
{
    var time = 2;
    var intervalId = setInterval(function ()
    { 
        reqElement.innerText = time; 
        if(time==="Go!")
            clearInterval(intervalId);
        time-=1; 
        if(time===0)
            time = "Go!";
    },1000);
}
function showWords()
{
    alert("Hi!");
}

在 showWords 函数中，我也希望对页面进行一些更改。但是，我希望它仅在 startCountdown 函数完全执行后才执行。截至目前，当我运行上面的代码时，只要我点击按钮，就会弹出警报！ - 但我不希望它发生。

我需要做哪些改变？

(showWords 函数完全执行后 - 我希望再执行一个函数 - 这样我希望函数按顺序执行 - 即必须发生更改按特定顺序排列。）

感谢您的帮助！

P.S.: 如果您无法理解我的问题，请告诉我。

Answer 1

所以当它像这样调用 clearInterval 时

document.getElementById("startButton").addEventListener("click",startTheGame);
function startTheGame()
{
    var contentSlides = document.getElementsByClassName("slide");
    // Game started so we are hiding the start slide!
    contentSlides[0].classList.add("hideDisplay"); 
    //
    // Now the "321 Go!" down timer is to be shown!
    contentSlides[1].classList.remove("hideDisplay");
    startCountdown(document.getElementById("onClickCount"));    //
}
function startCountdown(reqElement)
{
    var time = 2;
    var intervalId = setInterval(function ()
    { 
        reqElement.innerText = time; 
        if(time === 0){
            clearInterval(intervalId);
            reqElement.innerText = "Go!"
            showWords();
        }
        time--; 

    },1000);
}
function showWords()
{
    alert("Hi!");
}

如何使函数在 JS 中按顺序调用？

How to make functions get called sequentially in JS?

javascript

dom-events