Asynchronous Programming:
The Event Loop, The Message Queue, and You
Objectives
- Define blocking and synchronous code execution.
- Contrast blocking/synchronous code execution with non-blocking/async code execution.
- Describe the relationship between async and:
- The message queue
- the event loop
"Synchronous"
In "synchronous" programming every line of code happens in order. Any operation that requires some time to pass will block until the operation finishes.
Blocking call: Control returns only when the call completes.
"Asynchronous"
A program which uses Non blocking calls. It can have only 1 thread and still remain interactive.
Non blocking call: Control returns immediately. Later OS somehow notifies the process that the call is complete.
Javascript is single-threaded, non-blocking and async.
Analogy: Coffeshop
Blocking Single Threaded Coffeshop
Blocking Multi Threaded Coffeshop
Non-Blocking Single-Threaded Coffeshop, aka Javascript
In JavaScript
Synchronous:
Asynchronous:
for(let i = 0; i < 10; i++) {
console.log(i);
}
console.log("done");for(let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 0);
}
console.log("done");In JavaScript
Synchronous:
for(let i = 0; i < 10; i++) {
console.log(i);
}
console.log("done");In this block of code, the line inside the loop behaves synchronously. Each console.log statement waits for the previous to complete before moving on.
In JavaScript
Asynchronous:
for(let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
console.log("done");In this block, the setTimeout introduces asynchronous behavior. Specifically, "done" prints first, followed by the 10 callbacks executing one second later.
So What?
The ability to wait without blocking can help us write more efficient programs by never wasting time.
If each setTimeout had to wait for the previous to complete in our code -- it would take 10 seconds instead of 1:
for(let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
console.log("done");So What?
Lots of things take time to fetch that don't need to block -- like reading from the filesystem or AJAX requests.
User Input is asynchronous by definition; we never know when a user is going to click or hit enter.
So Can We ...
- Define the terms asynchronous and non-blocking
Next We'll...
- Describe the relationship between asynchronous and:
- The Message Queue
- The Event Loop
The Message Queue
The Message Queue is a place in memory where JavaScript keeps a list of "messages". Our code from before creates 10 such messages -- each associated with a callback
for(let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
console.log("done");The Event Loop
Anytime the current process finishes, The Event Loop requests the next item in The Message Queue.
for(let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
console.log("done");while(queue.waitForMessage()){
queue.processNextMessage();
}The Event Loop
Processing the Next Message means putting the function associated with that message on top of The Stack, which will be empty at this point.
while(queue.waitForMessage()){
queue.processNextMessage();
}function() {
console.log(i);
}The Event Loop
The message is removed from the queue when we start processing it.
while(queue.waitForMessage()){
queue.processNextMessage();
}function() {
console.log(i);
}The Event Loop
After the message is processed, we re-enter The Event Loop.
while(queue.waitForMessage()){
queue.processNextMessage();
}Completes, pops off stack
The Event Loop
Repeat
while(queue.waitForMessage()){
queue.processNextMessage();
}function() {
console.log(i);
}- Describe the relationship between asynchronous and:
- The Message Queue
- The Event Loop
Can We...
Questions?
Asynchronous Javascript and the Event Loop
By Hamid Aghdaee
Asynchronous Javascript and the Event Loop
- 692
