Async code

Async code is code that isn’t done immediately when being called.

  1. setTimeout(() => {
  2.   console.log('do stuff');
  3. }, 3000 )

3s seconds in the future the timeout is done and do stuff is echoed to the screen. We can see that the anonymous function we provide is being triggered when time has passed. Now for another more revealing example:

  1. doWork( () => {
  2.   console.log('call me when done');
  3. })
  1. function doWork(cb){
  2.    setTimeout( () => {
  3.      cb();
  4.    }, 3000)
  5. }

Other example of callback code are events here demonstrated by a jQuery example

  1. input.on('click', () => {
  3. })

The gist of callbacks and async in general is that one or more methods are invoked sometime in the future, unknown when.

The Problem

So we established a callback can be a timer, ajax code or even an event but what is the problem with all that?

One word Readability

Imagine doing the following code

  1. syncCode()  // emit 1
  2. syncCode2()  // emit 2
  3. asyncCode()  // emit 3
  4. syncCode4()  // emit 4

The output could very well be

  1. 1,2,4,3

Because the async method may take a long time to finish. There is really no way of knowing by looking at it when something finish. The problem is if we care about order so that we get 1,2,3,4

We might resort to a callback making it look like

  1. syncCode()
  2. syncCode()2
  3. asyncCode(()= > {
  4.    syncCode4()
  5. })

At this point it is readable, somewhat but imagine we have only async code then it might look like:

  1. asyncCode(() => {
  2.    asyncCode2(() => {
  3.      asyncCode3() => {
  5.      }
  6.    })
  7. })

Also known as callback hell, pause for effect :)

For that reason promises started to exist so we got code looking like

  1.   getData()
  2.     .then(getMoreData)
  3.     .then(getEvenMoreData)

This is great for Request/Response patterns but for more advanced async scenarios I dare say only Rxjs fits the bill.