Asynchronous – Javascript – Asynchronous is simple

View Github Repository Open presentation in a new window

galicians

See all presentation from galicians

Asynchronous – Javascript – Asynchronous is simple

0 0

AsynchronousJsSlides

On Github galicians / AsynchronousJsSlides

Asynchronous

Javascript

At MakersAcademy by Pablo

Async Js

- Understanding what is asynchronous javascript

- A few short !== simple exercises

- Realising we didn’t understand point 1

- Concepts that play a role in async javascript

- Do I understand now the async pattern?

- Resources for those that say no

- Resources for those that say yes

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

and there was ruby...

and I like it!!, because when I run this:

puts "puts in line one, Im the first one"

sleep(2)

puts "puts in line two"

I get this:

puts in line one, Im the first one

//waits 2 sec

puts in line two
and everybody was so happy
It’s easier to understand async if you first understand what “synchronous”, the opposite, means. think about people, they are asynchronous, for example a have a synchronous friend In programming, we can simplify the definition of synchronous code as “a bunch of statements in sequence”; so each statement in your code is executed one after the other. HAVE YOU USED async javascript already?(wait) jquery
But now in javascript, I run this:
setTimeout( function() { console.log('Im the first console.log') }

, 2000);

console.log('Im the second console log');
and I got this:
Im the second console log

//waits  2 sec

Im the first console.log
no bueno

“synchronous” means to define async

a synchronous friend

In programming, each statement in your code is executed one after the other.

HAVE YOU USED async javascript already?

Exercises

Using async javascript

Execise 1: What is the setTimeout doing?

setTimeout( function() { console.log('Im the first console.log') }

, 2000);

console.log('Im the second console log');
Why do I get this?
Im the second console log

//wait 2 sec

Im the first console.log

Execise 1: Solution

setTimeout(function, time) is a function that receives 2 parameters:

- the first parameter is another function

- the second parameter is a time in milliseconds

- and it will execute the function received as a first parameter after the time we pass as a second parameter

Execise 2: We know what timeout() does

What is the output of this script?

setTimeout(function() { console.log('Im console.log in line one') }

, 3000);

setTimeout(function() { console.log('Im console.log in line two') }

, 2000);

console.log('console log in line three')

Execise 2: Solution

setTimeout(function() { console.log('Im console.log in line one') }

, 3000);

setTimeout(function() { console.log('Im console.log in line two') }

, 2000);

console.log('console log in line three')
					
console log in line three

console log in line two

console log in line one

Execise 3: Yes timeout() again...

What is the output of this script?

for(var i = 0; i < 5; i++) {

  console.log("Calling setTimeout for value: " + i);

  setTimeout( function() { console.log(i) }, 1000);

};

Execise 3: Solution

Calling setTimeout for value: 0

Calling setTimeout for value: 1

Calling setTimeout for value: 2

Calling setTimeout for value: 3

Calling setTimeout for value: 4

//wait 2 seconds

5

5

5

5

5

Why?

Last Exercise

Write the code that generates the following output:

Calling setTimeout for value: 0

Calling setTimeout for value: 1

Calling setTimeout for value: 2

Calling setTimeout for value: 3

Calling setTimeout for value: 4

0

1

2

3

4

Execise 4: Solution

for (var i = 0; i < 4; ++i) {
 
  wrappingTimeout(i);

};

function wrappingTimeout(i) {

  console.log("Calling setTimeout for value: " + i);

  setTimeout(function() { console.log(i); }, 2000);

};

Asynchronous is simple

but you need to understand Javascript, meaning:

understanding hoisting understanding scope understanding clousures and of course understanding the event loop ...

What is the Event Loop?

Queue of messages and callbacks

Event Loop I

Event Loop II

Event Loop III

Event Loop IV

Event Loop IV

Event Loop IV

Do I understand the Asynchronous pattern?

Resources for those saying no

Resources for those saying yes

Can I avoid to use Aj?

  • Timers: setTimeout( ) or setInterval( )
  • XHRs: xhr.send( )
  • Promises: promise has been resolved.
  • Object.observe
  • FileSystem API
  • Eligible DOM events via addEventListener()
  • Multimedia events via addEventListener
  • ...

TO BE CONTINUED...

Thanks