1

I have read some articles and learnt the basic of stack in Javascript, which it operates in LIFO principles. However, most of the tutorial I can find used nested function call as an example. How will the stack operates for a parallel function call like this?

function first () {
  console.log(1)
}

function second () {
  console.log('expensive computation here')
}

function third (v) {
  console.log(v)
}

function runCallback () {
  first()
  second()
  third()
}

runCallback()

If second conducts some very expensive computation, will it block third from running? Since these functions are independent(most like to have effect by mutation outside), can I make second non-blocking without using Promise.all?

John Winston
  • 1,260
  • 15
  • 30
  • `function`s execute in the order they are called regardless of how expensive the computation is. `Promise`s by themselves do not dictate execution order, although they will `resolve` in order from fastest to slowest, based on Asynchronicity. – StackSlave Jan 11 '21 at 04:58

3 Answers3

4

If second conducts some very expensive computation, will it block third from running?

Yes, if second's computations are synchronous. Once a function is called, all synchronous code inside that function will run to completion before the function terminates. Only once the function terminates will control flow be yielded to the caller - which, in this case, will then call third().

can I make second non-blocking without using Promise.all?

One option is to delay second's run until all subsequent synchronous functions are complete, by putting it on the microtask queue, eg:

Promise.resolve().then(second);
third();

Or with an instant setTimeout (macrotask):

setTimeout(second);
third();

True parallelism, where second runs at the same time as third would only be possible with special environment features like web workers or a child process in Node.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
2

Web worker is an alternative for doing jobs in parallel.

If you want to know more about it. Web workers - How do they work?

venkatesh pogartha
  • 271
  • 1
  • 5
1

can I make second non-blocking without using Promise.all?

Of course, you should run the less expensive code as fast as possible. So by somehow, you add the expensive computation code into another thread (web browser API or node api, for example).

Due to the code moved on api, whenever it's done, it'll move to the queue then is executed when the call stack is empty (after third() method)

function first () {
  console.log(1)
}

function second () {
  console.log('expensive computation here')
}

function third (v) {
  console.log(v)
}

function runCallback () {
  first()
  setTimeout(second, 2000); //or using Promise static method like this: Promise.resolve().then(second);
  third("any value");
}

runCallback()

Thanks @Philip Roberts with great tool to visualize JS runtime.

Real time demo here

enter image description here enter image description here

Nguyễn Văn Phong
  • 13,506
  • 17
  • 39
  • 56
  • Thank you for your answer. What is the name of that website? It seems very useful to help me understand the stack. – John Winston Jan 11 '21 at 07:07
  • 1
    Oh yeah, Here you are: http://latentflip.com/loupe/?code=ZnVuY3Rpb24gZmlyc3QgKCkgew0KICBjb25zb2xlLmxvZygxKQ0KfQ0KDQpmdW5jdGlvbiBzZWNvbmQgKCkgew0KICBjb25zb2xlLmxvZygnZXhwZW5zaXZlIGNvbXB1dGF0aW9uIGhlcmUnKQ0KfQ0KDQpmdW5jdGlvbiB0aGlyZCAodikgew0KICBjb25zb2xlLmxvZyh2KQ0KfQ0KDQpmdW5jdGlvbiBydW5DYWxsYmFjayAoKSB7DQogIGZpcnN0KCkNCiAgc2V0VGltZW91dChzZWNvbmQsIDIwMDApOyAvL29yIHVzaW5nIFByb21pc2Ugc3RhdGljIG1ldGhvZCBsaWtlIHRoaXM6IFByb21pc2UucmVzb2x2ZSgpLnRoZW4oc2Vjb25kKTsNCiAgdGhpcmQoImFueSB2YWx1ZSIpOw0KfQ0KDQpydW5DYWxsYmFjaygp!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D – Nguyễn Văn Phong Jan 11 '21 at 07:10