How can I call a function when another have been executed

Question

I'm a complete beginner at JavaScript. I just want to call the function called seconONe() just after the function firstOne() completes its execution. by saying this, I mean the function two will call when the value of that p1 is 4 ( in this case ); I can achieve it by calling a setTimeout() function. but what if I don't know how many does it take to execute { the first one() }?

 // getting DOM element
const p1 = document.getElementById(`one`);
const p2 = document.getElementById(`two`);
const p3 = document.getElementById(`three`);

// first function
function firstOne() {
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            p1.innerHTML = i;
        }, i * 1000);
    }
}

// second function
function seconOne() {
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            p2.innerHTML = i;
        }, i * 1000);
    }
}

Answer 1

A possible solution is to work with promises . More info about promises here .

Working example

 var p1 = 1; var p2 = 2; var p3 = 3; const firstPromise = new Promise((resolve, reject) => { for (let i = 0; i < 5; i++) { setTimeout(() => { p1 = i; }, i * 1000); } resolve() }); const secondPromise = new Promise((resolve, reject) => { for (let i = 0; i < 5; i++) { setTimeout(() => { p2 = i; }, i * 1000); } resolve() }); //run first promise console.log("First promise called") firstPromise.then((response) => { console.log("First promise done") //run second promise after first promise succeed console.log("Second promise called") secondPromise.then((response) => console.log("Second promise done")) })

Answer 2

your question is not childish at all. What you will need to understand are callbacks and promise handlers. This just tells JavaScript to wait till a task has been completed in order to execute the next task.

firstOne().then(() => secondOne())

Answer 3

put if condition in your firstOne function.

const p1 = document.getElementById(`one`);
const p2 = document.getElementById(`two`);
const p3 = document.getElementById(`three`);

// first function
function firstOne() {
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            if(i == 4){
               seconOne();
            }else{
                p1.innerHTML = i;
            }
        }, i * 1000);
    }
}

// second function
function seconOne() {
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            p2.innerHTML = i;
        }, i * 1000);
    }
}

Answer 4

Just to build on the other answers that have suggested using a Promise , here's a more generalised solution that also uses async/await .

(In summary: call a function with a count, and an element. That function will return a promise that "at some point" work will be completed. An inner function loops updating the element content until that count has been reached, at which point the promise resolves, and the next thing can start).

 // Cache the elements const p1 = document.querySelector('#one'); const p2 = document.querySelector('#two'); const p3 = document.querySelector('#three'); // `timer` accepts a count, and the element // to apply the count to function timer(count, el) { // Return a promise that basically says: // once I'm done doing this work, resolve, // and then the event queue can // get on with the next thing return new Promise(resolve => { // So we create a loop that logs the numbers // in our element up to the count we specified. // and when that number is reached, resolve the promise function loop(n = 0) { // If our current `n` value is <= count if (n <= count) { // Set the content of the element el.textContent = n; // Call `loop` again after a second // with an incremented `n` value setTimeout(loop, 1000, ++n); // Otherwise resolve the promise } else { resolve(); } } loop(); }); } // And now we just await each resolved promise async function main() { await timer(4, p1); await timer(7, p2); await timer(20, p3); console.log('Done;'); } main();

 <div id="one"></div> <div id="two"></div> <div id="three"></div>

Additional documentation

• querySelector