Events - Async

Mini presentation @ JS101

f ( )

Katja Durrani       03 October 2017

f ( )

At the heart of everything is this principle:

 

 

An event happens, and as a consequence a function is being invoked

The function is called a callback and can be defined in various ways which we will look at in a moment. 

(Also, we have an alternative way of describing asynchronous actions now, promises, but they are for another time)

Adding event listeners to objects -
DOM events as an example

button.addEventListener("click", function(e){
     console.log("A button was clicked");
})

 

or: 

 

button.addEventListener("click", callback)

Adding events - DOM events as an example (ctd)

Two ways of defining callback:

Defining a function called callback in a function declaration:
    function callback(e) {

        e.preventDefault();

        console.log("A button was clicked", e.target);

     }
 

Assigning a function to a variable called callback:

    var callback = function(e){

        e.preventDefault();
        console.log("A button was clicked", e.target);
    }


Note: In the second case, the variable needs to be declared before it is used. Still, this is usually the preferred way.

( func(e){} )()

( func(){} )()

e

setTimeout(func, time)

DOM Event

Timer Event

Different types of events

( func(resp){} )()

( func(err,data){} )()

resp

Ajax

Node

API

file

err,
data

Inversion of control!

What types of events are there that we use in JS?

Web events (DOM and browser):

- A list of web related events by Mozilla (loads!)

Examples:

  • Mouse click
  • Pressing a key
  • Web page finishes loading
  • A form being submitted
  • Video being played
  • Error occuring
  • Timer events

What types of events are there that we use in JS? (ctd.)

Ajax:

- Ajax requests are mostly used to fetch data from third party APIs. Originally, the XMLHttpRequest object was used (MDN documentation)

- The following events can be listened to

  • progress
  • load
  • error
  • abort

- It is usually better to use a library like axios, or, when jQuery is available, jQuery.ajax(); also there is the new fetch API

What types of events are there that we use in JS? (ctd.)

NodeJS:

- Built around event-driven architecture with certain objects that emit events and cause functions ("listeners") to be called

- NodeJS core has modules that allow access to unix commands, for example fs for FileSystem

- There are synchronous methods as well, but usually asynchronous should be used

- Uses error-first callbacks

- More about asynchronous programming in Node:
https://blog.risingstack.com/node-hero-async-programming-in-node-js/

 

Asynchrony - In what order are events occuring?

JS is a
"single-threaded

non-blocking

asynchronous

concurrent"

language

$.on('button', 'click', function onClick() {
    setTimeout(function timer() {
        console.log('You clicked the button!');    
    }, 2000);
});

console.log("Hi!");

setTimeout(function timeout() {
    console.log("Click the button!");
}, 5000);

console.log("Welcome to loupe.");

Actually, JS by itself is not asynchronous by itself, asynchrony happens through interaction with environment APIs (Browser, Node etc.). A good explanation of Heap, Stack, Event Queue and
Event Loop:

http://blog.naturalint.com/asynchronous-programming-part-1-event-loop-other-animals/

1

2

3

4/5

4/5

<-   Check out a visualisation

of this example in this

brilliant tool built by

Philip Roberts

http://latentflip.com/loupe/

Some good resources:

Very basic practical examples:
https://github.com/katjad/event-async-examples

Links

Made with Slides.com