Is it possible to get mentioned below output using setTimout. If yes, then please share your thought:-

console.log("1st");
setTimeout(()=>{
   console.log("2nd");
},0);
console.log("3rd");

**Output should be **

1st
2nd
3rd

CodePudding user response：

Majed Badawi's answer shows a way to kind of achieve what you want, but it is just a construct that would be similar to simply put your 3rd log inside the setTimeout callback after the 2nd.

There are important conceptual reasons for this.

JavaScript is an event driven language, where you have something called an event loop that is checking for new events and process them non stop.

What you are looking for here, is a way to use setTimeout as you would you would use sleep in PHP, C or others. It simply doesn't exist.

sleep is a blocking instruction: the program waits for X seconds before proceeding. If you do this in JavaScript, you will prevent the event loop from running and you don't want to even try to do this. If you really insist, you can check if enough time has elapsed in a while statement, this will freeze your browser in a front end environment or prevent the handling of new requests in a back end environment.

More on this here https://cloudoki.com/js-dont-block-the-event-loop/

In contrast, setTimeout will fire an event to the provided listener after some time, the rest of the program (and the event loop) will continue to run.

CodePudding user response：

Using async/await:

const foo = () => new Promise(resolve => {
  setTimeout(() => { 
    console.log("2nd");
    resolve();
  }, 0);
});

(async () => {
  console.log("1st");
  await foo();
  console.log("3rd");
})();