0

I want to run the following code to get the result of 1,2 (a pause of 2 seconds)3,4,5. But because of the non-blocking nature of Javascript I will get 1,2,4,5 (pause of roughly 2 seconds) 3.

I have the following code which includes some asynchronous code which will cause the 3 to show at the end since the console.log(3) won't be called until the timeout completes and the remaining code runs since it is not blocked.

console.log(1);
console.log(2);
setTimeout(()=> { console.log(3); }, 2000);
console.log(4);
console.log(5);

My current code is definitely not optimized for Javascript (or will even work as intended without some changes) but sometimes blocking code vs non-blocking code is easier to write and still performs adequately even if it is less efficient.

Is there any sort of way other than chaining callbacks, async/awaits etc... to kind of force Javascript into a less efficient blocking mode where all lines of code (Async or Sync) will be forced to wait and run one at a time in the order they are experienced?

Joseph U.
  • 4,457
  • 10
  • 41
  • 47
  • 2
    Short answer: no. JavaScript is event driven and unlike some other languages does _not_ have a sleep command that can be executed in synchronous code. – traktor Aug 12 '21 at 00:51
  • Thank you for the response @traktor I was hoping there might be some sort of hacky way to do it like a command that just forces everything to block. The moral is I probably to aim to use the language in the way it was intended rather than trying to make it run like another language with a programming paradigm I am more comfortable with. – Joseph U. Aug 12 '21 at 00:54
  • 1
    JavaScript engine uses a call stack to manage execution contexts: the Global Execution Context and Function Execution Contexts. The call stack works based on the LIFO principle i.e., last-in-first-out. When you execute a script, the JavaScript engine creates a Global Execution Context and pushes it on top of the call stack. Whenever a function is called, the JavaScript engine creates a Function Execution Context for the function, pushes it on top of the Call Stack, and starts executing the function. – Hanna Rose Aug 12 '21 at 01:03
  • 1
    If a function calls another function, the JavaScript engine creates a new Function Execution Context for the function that is being called and pushes it on top of the call stack. When the current function completes, the JavaScript engine pops it off the call stack and resumes the execution where it left off in the last code listing. a setTimeout function will be stored in a queue (not in call stack). its will be executed after call stack are empty. – Hanna Rose Aug 12 '21 at 01:03
  • demo : http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D – Hanna Rose Aug 12 '21 at 01:09
  • You could put your function that you want to wait for in a function that returns a Promise. The create an `async function init()` that you put your main functions and call `init()` to run when the js file loads. I made a working example here: https://jsfiddle.net/tg53wjk0/2/ – Steve Aug 12 '21 at 02:40

0 Answers0