Executing a function after another one has finished in Angular/TypeScript

Question

Executing a function after another one has finished in Angular/TypeScript

I need to execute the f2 function only after the completion of f1, regardless of whether f1 is synchronous or asynchronous. To achieve this, I came up with a solution using a combination of Promise and a timer:

executeFunctions() {
    this.f1().then(result => {
        this.f2()
    })
}

f1() {
    return new Promise<any>((resolve, reject) => {

        // Code for f1...

        setTimeout( () => {
            resolve(x);
        }, 1500); // Simulating delay
    });
}

f2() {
    // Code for f2...
}

However, this approach always introduces a fixed delay of 1500ms. I am looking for a way to have f2 start immediately after the completion of f1, without any unnecessary waiting time. Is there a more precise way to synchronize the execution of these functions?

angular typescript asynchronous promise synchronous

Answer 1

Answer №1

To eliminate the setTimeout component, simply remove it. This will trigger a call to either resolve or reject, transferring control flow to the next then or catch handler. If your Promise includes an asynchronous function, remember to invoke resolve/reject upon completion of that function.

Consider shortening the wait time from 1500ms - this duration represents the minimum time before the function can execute. Try increasing it to 2000ms. The timing is impacted by the main thread in which JavaScript operates. When the main thread is idle, any pending asynchronous tasks will be executed.

function f1() {
    return new Promise((resolve, reject) => {
        console.log('f1');
        resolve();
    });
}

function f2() {
   console.log('f2');
}

f1().then(res => f2());

Answer 2

To eliminate the setTimeout component, simply remove it. This will trigger a call to either resolve or reject, transferring control flow to the next then or catch handler. If your Promise includes an asynchronous function, remember to invoke resolve/reject upon completion of that function.

Consider shortening the wait time from 1500ms - this duration represents the minimum time before the function can execute. Try increasing it to 2000ms. The timing is impacted by the main thread in which JavaScript operates. When the main thread is idle, any pending asynchronous tasks will be executed.

function f1() {
    return new Promise((resolve, reject) => {
        console.log('f1');
        resolve();
    });
}

function f2() {
   console.log('f2');
}

f1().then(res => f2());

Answer 3

Answer №2

When f1 operates synchronously, there is no need for any special handling:

global() {
    f1();
    f2();
}

If f1 is asynchronous and returns an Observable, utilize Rxjs operator, such as concatMap:

global() {
    f1().concatMap(() => f2());
}

For the scenario where f1 is asynchronous and returns a Promise, employ async/await:

async global() {
    await f1();
    f2();
}

In cases where f1 is asynchronous and returns a Promise (alternative):

global() {
    f1().then(res => f2());
}

Answer 4

When f1 operates synchronously, there is no need for any special handling:

global() {
    f1();
    f2();
}

If f1 is asynchronous and returns an Observable, utilize Rxjs operator, such as concatMap:

global() {
    f1().concatMap(() => f2());
}

For the scenario where f1 is asynchronous and returns a Promise, employ async/await:

async global() {
    await f1();
    f2();
}

In cases where f1 is asynchronous and returns a Promise (alternative):

global() {
    f1().then(res => f2());
}

Answer 5

Answer №3

Simply eliminate the timeout from the code snippet below:

function f1() {
    return new Promise((resolve, reject) => {
        console.log('i am first');
         resolve();
    });
}

function f2() {
    console.log('i am second');
}

f1().then(f2);

Answer 6

Simply eliminate the timeout from the code snippet below:

function f1() {
    return new Promise((resolve, reject) => {
        console.log('i am first');
         resolve();
    });
}

function f2() {
    console.log('i am second');
}

f1().then(f2);

Executing a function after another one has finished in Angular/TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Using Angular 2: Applying a specific class to a single element with [ngClass]

Creating TypeScript Unions dependent on a nested object's property

Prevent Typescript from flagging unnecessary warnings about unassigned values that will never be assigned

Arranging an array of objects based on a specific keyword and its corresponding value

Explore how Angular can display the highlights of deepDiff results in JSON format!

Performing updates on Meteor.users collection while handling a promise rejection (leveraging fcm-push with Meteor)

What are the steps to troubleshoot a Node Package Manager library in Visual Studio Code?

Exploring the power of EJS with conditional logic

Angular 2 Aot Issue: CRITICAL ERROR: CALL_AND_RETRY_LAST Allocation unsuccessful - JavaScript heap exhausted

How to effectively send an HTTP GET request to a REST API in Angular 2 and save the response in a JSON object

Error in Typescript occurring with a custom typography element

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

Differences Between ES5 and ES6 in Dealing with Arrays in JavaScript

Ways to delete a class in typescript

Show an error message in-line with a line break

Custom styles for PrimeNG data tables

Is it necessary to validate a token with each change of page?

What are some ways to implement Material UI's Chip array to function similar to an Angular Chip Input?

Encountered an unexpected error while attempting to integrate my custom npm library "MyModule" into my Angular 2 project

"Efficient TCP Communication with Asynchronous Operations in the .NET Framework