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
Some good resources:
Very basic practical examples:
https://github.com/katjad/event-async-examples
Links