Executing a function after another one has completed in Angular 6

Question

Executing a function after another one has completed in Angular 6

I need to run 2 methods in the ngOnInit() lifecycle hook, with method2() being executed only after method1() has completed. These methods are not performing HTTP requests and both belong to the same component.

  ngOnInit() {
    this.method1();
    this.method2(); //should only be called once method1() is done
  }

  method1() {
    //do something
  }

  method2() {
    //do something, but should only start after method1 is finished
  }

What would be the most effective solution for this issue?

angular typescript

Answer 1

Answer №1

Your code is functioning perfectly. If no asynchronous tasks are being executed, the default behavior is to run one function, statement, or expression after another...

Even when an asynchronous task is called, all subsequent statements and expressions are still processed synchronously until the call stack is completed. The asynchronous task is placed in the event loop for later execution.

Examples of asynchronous tasks include not only HTTP requests, but also functions like setTimeout and setInterval.

To learn more about the event loop, you can visit this link.

Answer 2

Your code is functioning perfectly. If no asynchronous tasks are being executed, the default behavior is to run one function, statement, or expression after another...

Even when an asynchronous task is called, all subsequent statements and expressions are still processed synchronously until the call stack is completed. The asynchronous task is placed in the event loop for later execution.

Examples of asynchronous tasks include not only HTTP requests, but also functions like setTimeout and setInterval.

To learn more about the event loop, you can visit this link.

Answer 3

Answer №2

Why not simply invoke the method2 within the method1 if there are no asynchronous tasks to be performed?

ngOnInit() {
  this.method1();
}

method1() {
  //do something

  //once method1 operations are done, call this.method2
  this.method2();
}

method2() {
  //perform actions that must wait until method1 is completed
}

Answer 4

Why not simply invoke the method2 within the method1 if there are no asynchronous tasks to be performed?

ngOnInit() {
  this.method1();
}

method1() {
  //do something

  //once method1 operations are done, call this.method2
  this.method2();
}

method2() {
  //perform actions that must wait until method1 is completed
}

Executing a function after another one has completed in Angular 6

Answer №1

Answer №2

Similar questions

Calculating the time difference between two dates in the format yyyy-MM-ddTHH:mm:ss.fffffff can be done by following these steps

Here is a unique rewrite of the text: "Converting to TypeScript: Add the Node Modules Path to the global paths array in the 'module' module using

Challenges with importing and using jspdf and autotable-jspdf in Angular 8

Is it advisable to reuse encapsulated constants during unit testing and if so, what is the best

Modify multiple elements in a nested array by utilizing the $set and $push operators

Angular issue: Unable to scroll to top after route change and loading a new component

Tips for utilizing ng2-dragula and resizing Angular elements efficiently

How can I extract the initial item with a value from a service response in an array of objects using Angular 2?

Encountering ENOENT error: The specified file or directory does not exist, when trying to access 'C:Users itrathodDesktopAngular ode_modules' in an Angular 11 project

What is the recommended way to retrieve the Nuxt `$config` within Vuex state? Can it only be accessed through store action methods?

Minimize the gap between legend text and icon in Highchart

Issue with resolving symbol JSON in Angular 7 when using JSON.stringify

Using NodeJS API gateway to transfer image files to S3 storage

What is the best way to change the number 123456789 to look like 123***789 using either typescript or

Change the spread operator in JavaScript to TypeScript functions

Strange occurrences observed while looping through an enum in TypeScript

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

ESLint is unable to locate the OnInit function within the "@angular/core" module

Retrieve particular key from document in MongoDB based on provided value

I'm diving into the world of Typescript and trying to figure out how to use tooltips for my d3 stacked bar chart. Any guidance on implementing mouseover effects in Typescript would be greatly