Is there a way to automatically trigger a function once another function has completed its execution?

Question

Is there a way to automatically trigger a function once another function has completed its execution?

I am diving into the world of JavaScript as a beginner. All I want to do is trigger the function called seconOne() right after the execution of firstOne(). Specifically, I need the function two to be invoked when the value of p1 reaches 4. While I can use setTimeout() to achieve this by waiting a set amount of time before calling seconOne(), I am unsure about how many iterations it will take for firstOne() to complete.

 // Accessing DOM elements
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);
    }
}

javascript function delayed-execution asynchronous-javascript

Answer 1

Answer №1

One potential resolution is to utilize promises. For further insights on promises, check out this resource.

Example in Action

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


//execute the first promise
console.log("First promise called")
firstPromise
  .then((response) => {
    console.log("First promise done")
    
    //execute the second promise once the first one succeeds
    console.log("Second promise called")
    secondPromise
      .then((response) => console.log("Second promise done"))
  })

Answer 2

One potential resolution is to utilize promises. For further insights on promises, check out this resource.

Example in Action

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


//execute the first promise
console.log("First promise called")
firstPromise
  .then((response) => {
    console.log("First promise done")
    
    //execute the second promise once the first one succeeds
    console.log("Second promise called")
    secondPromise
      .then((response) => console.log("Second promise done"))
  })

Answer 3

Answer №2

Don't worry, your question is perfectly valid. To delve deeper into this topic, you should familiarize yourself with callbacks and promise handlers. These concepts essentially instruct JavaScript to pause execution until a specific task is finished.

executeTask1().then(() => executeTask2())

Answer 4

Don't worry, your question is perfectly valid. To delve deeper into this topic, you should familiarize yourself with callbacks and promise handlers. These concepts essentially instruct JavaScript to pause execution until a specific task is finished.

executeTask1().then(() => executeTask2())

Answer 5

Answer №3

Ensure to include an if statement within your primaryOne function.

const element1 = document.getElementById(`one`);
const element2 = document.getElementById(`two`);
const element3 = document.getElementById(`three`);

// primary function
function primaryOne() {
    for (let num = 0; num < 5; num++) {
        setTimeout(() => {
            if(num == 4){
               secondaryOne();
            }else{
                element1.innerHTML = num;
            }
        }, num * 1000);
    }
}

// secondary function
function secondaryOne() {
    for (let num = 0; num < 5; num++) {
        setTimeout(() => {
            element2.innerHTML = num;
        }, num * 1000);
    }
}

Answer 6

Ensure to include an if statement within your primaryOne function.

const element1 = document.getElementById(`one`);
const element2 = document.getElementById(`two`);
const element3 = document.getElementById(`three`);

// primary function
function primaryOne() {
    for (let num = 0; num < 5; num++) {
        setTimeout(() => {
            if(num == 4){
               secondaryOne();
            }else{
                element1.innerHTML = num;
            }
        }, num * 1000);
    }
}

// secondary function
function secondaryOne() {
    for (let num = 0; num < 5; num++) {
        setTimeout(() => {
            element2.innerHTML = num;
        }, num * 1000);
    }
}

Answer 7

Answer №4

Expanding on the suggestions provided by others to utilize a Promise, here is a more versatile approach that incorporates async/await as well.

(To summarize: calling a function with a count and an element will result in a promise indicating that work will be completed "at some point". An inner function iterates through updating the element's content until the specified count is reached, at which point the promise resolves, allowing the next task to commence).

// Select and store the elements
const p1 = document.querySelector('#one');
const p2 = document.querySelector('#two');
const p3 = document.querySelector('#three');

// Define `timer` function which takes count and element
function timer(count, el) {

  // Return a promise stating:
  // after completing this work, resolve,
  // enabling the event queue to proceed
  return new Promise(resolve => {

    // Create a loop to update numbers
    // in the element up to the specified count.
    // Once count is reached, resolve the promise
    function loop(n = 0) {

      // If current `n` value is <= count
      if (n <= count) {

        // Update element content
        el.textContent = n;

        // Call `loop` again after one second
        // with an incremented `n` value
        setTimeout(loop, 1000, ++n);

      // Otherwise, resolve the promise
      } else {
        resolve();
      }

    }

    loop();

  });
}

// 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>

For further information, refer to:

querySelector

Answer 8

Expanding on the suggestions provided by others to utilize a Promise, here is a more versatile approach that incorporates async/await as well.

(To summarize: calling a function with a count and an element will result in a promise indicating that work will be completed "at some point". An inner function iterates through updating the element's content until the specified count is reached, at which point the promise resolves, allowing the next task to commence).

// Select and store the elements
const p1 = document.querySelector('#one');
const p2 = document.querySelector('#two');
const p3 = document.querySelector('#three');

// Define `timer` function which takes count and element
function timer(count, el) {

  // Return a promise stating:
  // after completing this work, resolve,
  // enabling the event queue to proceed
  return new Promise(resolve => {

    // Create a loop to update numbers
    // in the element up to the specified count.
    // Once count is reached, resolve the promise
    function loop(n = 0) {

      // If current `n` value is <= count
      if (n <= count) {

        // Update element content
        el.textContent = n;

        // Call `loop` again after one second
        // with an incremented `n` value
        setTimeout(loop, 1000, ++n);

      // Otherwise, resolve the promise
      } else {
        resolve();
      }

    }

    loop();

  });
}

// 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>

For further information, refer to:

querySelector

Is there a way to automatically trigger a function once another function has completed its execution?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to extract content from a remote website by utilizing javascript and iframe?

How can we utilize CSS floats to achieve maximum widths?

The instance cannot be accessed by ES6 class methods

Utilizing asynchronous functions to assign a JSON dataset to a variable

Tips for setting NgForm value within an Observable and verifying its successful implementation

Steps to make a pop-up window for text copying by users

Code for object creation, inheritance, and initialization

Deactivate a button on a specific tab

The onChange method in React is failing to execute within the component

jQuery is not updating the div as expected

The data remains stagnant even after employing the onDataChange function in react native following the integration of a reusable component

Adjusted position of the viewport if the DOM element containing the renderer is not located at the top of the display

Is it possible to encase <v-img> within an anchor element?

I am currently working on a website that offers different themes, and I am attempting to update the iframe to reflect the selected theme on the site

Trigger a function post-rendering in a React component

Create a path on the Google Map that follows the designated route

Adding color to characters, digits in an HTML file

Image-switching button

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

Using jQuery to add a checkbox to a list that is not ordered