what asynchronous programing mean in javascript?

Question

This loop take about 1.5 seconds.

console.time("test")
for (let i = 0; i < 1000000000; i++) {}
console.timeEnd("test")

My question is...

setTimeout(() => {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("banana");
}, 2000);

setTimeout(() => {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("apple");
}, 2000);

setTimeout(() => {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("mango");
}, 2000);


console.log("finished")

every setTimeOut() take 2 seconds but every loot take 1.5 seconds.
so I should get

finished!
// 2 secs later
banana 
apple 
mango (all at once)

But output is

finished
// 2s later
 banana
  // 1.5s later
 apple
  // 1.5s later
 mango

This is must-watch to clear this concept: What the heck is the event loop anyway? | Philip Roberts | JSConf EU — palaѕн
– palaѕн, Commented Jan 25, 2020 at 5:34

Markus · Accepted Answer · 2020-01-25 16:01:06Z

3

You should watch this video https://www.youtube.com/watch?v=8aGhZQkoFbQ, this explains the problem/behaviour in detail.

Just in Short: setTimeout will will place all the loops on the "Event Callback" Queue. When now the delay has passed, it will take the loops one after the other and executes them. But as one loop requires 1,5 seconds to run, these 1,5 seconds will block everything else from running, as in JS all code (excluding web apis) will be executed in the main event loop:

Programm start: 
loop1 => gets put into Event Callqueue (takes some milliseconds)
loop2 => gets put into Event Callqueue (takes some milliseconds)
loop3 => gets put into Event Callqueue (takes some milliseconds)
finalized is outputted. 

after 2000 milliseconds (as set in setTimout): 
loop1 => gets taken from queue and executed in the main event loop = takes 1,5 senconds and this blocks everything!
loop2 => the same... takes 1,5 seconds to execute 
loop3 => the same... takes 1,5 seconds to execute

JS can executed code "in parallel" only for some special external APIs. Most code is executed in the main event loop sequentially! This concept is absolute important to understand.

If you are looking for "Threads in Javascript", then Webworkers might be a very good alternative/solution. They allow execution of JS in parallel and in the background.

edited Jan 25, 2020 at 16:01

answered Jan 25, 2020 at 5:36

Markus

4,2824 gold badges44 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mohammed Over a year ago

ok then...can't I use another thread to complete the task (loop).

Markus Over a year ago

@Mohammed. There is a "newer workaround" for solving these kind of problems called "Webworker". It can help to solve your problem. Please see: developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/…

Mohammed Over a year ago

so. Asynchronous only do in serial ! Is asynchronous not parallel?

Markus Over a year ago

@Mohammed: (Part1 Answer:) Yes and No, it depends: Speaking generally, most of the functions provided by your Browser (like fetching data via http, file access, cryptografic functions, media, bluetooth-access...) are implemented by the browser. They do the processing in the background and in parallel (to your running code):These asynchronous functions are really "parallel". Here is a list of browser APIs most of them should be really asyncrhonous: developer.mozilla.org/en-US/docs/Web/API

Markus Over a year ago

@Mohammed: (Part 2 Answer): All js code that you write yourself will finally be somewhen run in the eventloop. And this code (while running) will block all other code from executing (except any Web API functions or webworkers, see part1). If you write code inside an async function/promise. Then it will be "async" in that sense, that the program-flow directly after your async function continues. But when it is time to run the code inside async/promise, this will then executed "singularily" (no other code from you is executed at that time).

Collectives™ on Stack Overflow

what asynchronous programing mean in javascript?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related