Reading
Understand how asynchronous JavaScript works:
- Read Henning's presentation about asynchronous Javascript (there's also a German video Show archive.org snapshot presentation in our shared folder)
- Read about Promise Show archive.org snapshot
- Read about async Show archive.org snapshot / await Show archive.org snapshot .
- Read about
requestAnimationFrame
Show archive.org snapshot
and
requestIdleCallback
Show archive.org snapshot
- Note that
requestAnimationFrame
can be used to reduce the number of repaints for animations. This might benefit your application performance.
- Note that
- Read Don't throw exceptions from async functions
- What Color Is Your Function Show archive.org snapshot
- Read about canceling promises
- Error handling in event listeners
Browse the internet to answer the following questions:
- What are "synchronous" or "blocking" APIs versus "asynchronous" APIs?
- Why does
fetch()
not simply return the response from the server? - Why is asynchronous code such a big issue in JavaScript (as opposed to the code we usually write in Ruby)?
- What are "callbacks" in JavaScript? Can you find examples for libraries that use callbacks to deal with asynchronicity?
- What are "promises" in JavaScript? Can you find examples for libraries that use promises to deal with asynchronicity?
Exercises
atFullSecond()
Create an implementation of setTimeout
that returns a promise rather than taking a callback. Name this new function atFullSecond
, as it should wait for the remaining milliseconds until the next second starts. For example, at 13:23 and 441 milliseconds, atFullSecond(1)
should wait for 559 milliseconds before triggering the callback function.
Internally, it can make use of setTimeout, but the API should be like that:
atFullSecond(2).then(function() {
console.log(`waited until exactly ${new Date}`);
});
new Date().getUTCMilliseconds()
gives you access to the current millisecond offset.
As a bonus, also reject the promise if the caller passes number smaller than one to atFullSecond
.
fetch()
Write a function that:
- Fetches a list of records via
fetch()
(either as a JSON array or as a pre-rendered HTML fragment). - Inserts the list into the DOM.
- Slowly fades in the list.
- Allows its caller to run code when the fade-in animation is done.
Create three different implementations of your function:
- Using callbacks
- Using promises and
then()
- Using promises and
async
/await
Note that you are expected to use fetch
in every variant, even though it does not offer a callback interface.