dimitris papadimitriou
dimitris papadimitriou More than 12 years’ experience as full stack developer and Software Architect . Functional javascript with categories.

Introduction to Asynchrony in Javascript

Introduction to Asynchrony in Javascript

Concurrency, Parallelism, Asynchrony

we are going to have a very brief view on the different concepts relating to asynchrony.

Concurrency

​ Consider you are given a two tasks task1 and task2. Concurrency means that you execute both tasks even if you alternate the execution and not wait for the one to finish in order to start the other.

Parallelism

Parallelism means performing two or more tasks simultaneously. Parallel computing in computer science refers to the process of performing multiple calculations simultaneously.

Threads

In computer science, a thread of execution is the smallest sequence of programmed instructions that can be managed independently the operating system.

JavaScript engine Runs on a single thread. Recent web browsers provide a way to overcome this potential performance issue. The HTML5 specification introduces Web Workers on the browser side to allow JavaScript code to run to multiple threads.

Synchronous and Asynchronous

In a synchronous programming model, tasks are executed one after another. Each task waits for any previous task to complete and then gets executed. This means that a task blocks everything until finished.

Consider the following script:

1
2
3
4
5
6
7
8
9
10
let getClient = () => {
        let n = 10000000000; 
        while (n > 0) { n--; }         //This simulate a cumbersome 
      return { id: 1, name: "rick" }  // time-consuming process like accessing a Database

    }
let client = getClient();
doSomethigElse();
console.log(client.name)

the doSomethigElse() function cannot be called by the js Engine until the getClient() finishes its execution.

getClient should finish for doSomethigElse to start

In an asynchronous programming model, when one task gets executed, you could switch to a different task without waiting for the previous to get completed. Asynchrony can be achieved in a single thread by switching tasks. In the following script the setTimeout will execute the getClient () code inside with 1 second delay in the meantime the execution will continue and proceed at the doSomethigElse function from that point on the JS engine will execute both asynchronously on a single tread by alternate the execution as we will see in the following section.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let getClient = () => {
   let n = 10000000000;
    while (n > 0) { n--; } //  This simulate a cumbersome time-consuming process   
                            //like accessing a Database        
    return { id: 1, name: "rick" }
}
    
setTimeout(() => {
let client = getClient();
console.log(client.name)
}, 1000); 

doSomethigElse();

This is an Asynchronous non-parallel execution

We could also have an Asynchronous parallel execution if we could use web workers

The Problem of Asynchrony

if we modify our initial example

1
2
3
4
5
6
7
  var getClient = () => { 
   return { id: 1, name: "rick" }
  };

  var client = getClient();
  console.log(client.name)

a bit in order to add a time delay around the return statement in the getClient function, then immediately we have a problem. So, the following does not work

1
2
3
4
5
6
7
8
9
  var getClient = () => {
   setTimeout(() => {
    return { id: 1, name: "rick" }
  }, 1000);
};

var client = getClient();

console.log(client.name)

Run This: Js Fiddle

Now in this situation we get an error because the client is undefined. in the following section we are going to see the mechanics of why this is happening

comments powered by Disqus