How to ensure execution order in TypeScript

Question

I'm trying to implement some functionalities when I end Up having an issue about execution order in typescript:

code:

new Promise((resolve) => {
          setTimeout(()=>{
            console.log("function11111");
            resolve();
          }
          ,3000);      
          
        })
        .then(_=>{
          setTimeout(()=>{
            console.log("function22222");
          }
          ,2000);   
        })
        .then(_=>{
          setTimeout(()=>{
            console.log("function3333333");
          }
          ,1000);   
        })

The OutPut:

function11111
function33333
function22222

My Questions are:

1)for function1111, if we replace this console.log('fucntion1111') by a function that takes some seconds, in this case, my code will fire resolve() before the function finish its execution, So how to ensure the wait for my function

2)In my code I'm doing then then, Why the execution doesn't respect my order ? I was thinking that promise is created for this purpose.

The execution does respect the order of code managed by promises, but each callback creates a new async process that *isn't* being manager by a promise. — jonrsharpe, Dec 25 '18 at 22:00
`setTimeout` does not return a Promise. It returns an Integer instantly, so the `.then()` is executed instantly. _([You can make it return a Promise, though](https://stackoverflow.com/a/39538518/1913729))_. In your "real world" code, make sure to return a Promise inside each `.then()` — blex, Dec 25 '18 at 22:04

score 4 · Accepted Answer · answered Dec 25 '18 at 22:12

The issue is that all the then handlers are invoked at the same time once the initial resolve() is called. And since each has a different timeout, hence the order of output as function33333 and then functon2222.

To maintain an order , you can do promise chaining which will wait for previous promise to get resolve , before invoking the next then() block.

I have chained the promises. Do let me know if you need more clarification.

new Promise((resolve) => {
      setTimeout(()=>{
        console.log("function11111");
        resolve();
      }
      ,3000);

    })
    .then(_=> new Promise(resolve => {
      setTimeout(()=>{
        console.log("function22222");
        resolve();
      }
      ,2000);
      })
    )
    .then(_=> new Promise(resolve => {
      setTimeout(()=>{
        console.log("function3333333");
        resolve();
      }
      ,1000);
      })
    );

That's nice!!! and for the first question ? should I implement a Promise in my function111 to ensure that the execution will wait until it will be finished ? — Karim Garali, Dec 26 '18 at 09:42
The first one is already resolving a promise by itself. new Promise is actually triggering the then after the `resolve()` part of the first promise. — Hiteshdua1, Dec 26 '18 at 09:44
If this answer helped you and if you have no other clarification, you could mark it as accepted @karim Garali — Hiteshdua1, Dec 28 '18 at 13:54

How to ensure execution order in TypeScript

code:

1 Answers1