Chapter 13. Surviving events
This chapter covers
- Understanding the event loop
- Processing complex tasks with timers
- Managing animations with timers
- Using event bubbling and delegation
- Using custom events
Chapter 2 included a short discussion on the JavaScript single-threaded execution model and introduced the event loop and the event queue, in which events wait for their turn to be processed. This discussion was particularly useful when presenting the steps in the lifecycle of a web page, especially when discussing the order in which certain pieces of JavaScript code get executed. At the same time, it’s a simplification, so in order to get a more complete picture of how the browser works, we’ll spend a significant part of this chapter exploring the nooks and crannies of the event loop. This will help us better understand some of the performance limitations inherent in JavaScript and the browser. In turn, we’ll use this knowledge to develop smoother-running applications.
During this exploration, we’ll put a special focus on timers, a JavaScript feature that enables us to delay the execution of a piece of code asynchronously by a certain amount of time. At first glance, this might not seem like much, but we’ll show you how to use timers to break up long-running tasks that make applications slow and unresponsive into smaller tasks that don’t clog the browser. This helps develop better-performing applications.