How to make functions get called sequentially in JS?

Question

I am making a webpage where once the user clicks on the start button, some changes will happen to the CSS of the page (I wrote the required JavaScript (JS) code). Only after these changes happen, I want some other changes to happen. In an attempt to achieve this, I wrote calls to 2 functions inside the function that gets called once the event happens: (In the below JS code, the 2 functions begin called inside the function that which gets triggered by the "click" event are- startCountdown and 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!");
}

In the showWords function also, I wish to make some changes to the page. But, I want it to get executed only after the startCountdown function gets executed completely. As of now when I am running the above code, as soon as I click on the button, the alert is popping up! - But I don't want it to happen.

What changes do I need to make?

(After the showWords function gets executed completely - I want one more function to be executed - in this way I want the functions to be executed sequentially - i.e. the changes must happen in a specific order.)

Thanks for the help!

P.S.: Please let me know if you aren't able to understand my question.

score 2 · Accepted Answer · answered Oct 24 '20 at 10:56

so when it's called clearInterval like this

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!");
}

yes because asnychronous javascript is such that if you call a normal function and the async function, they are not sequentially dependant, so you would need the first function to call the second function instead.. answer's already given — The Bomb Squad, Oct 24 '20 at 10:59

How to make functions get called sequentially in JS?

1 Answers1