You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

Timers, Speed, and Frame Rate

This section deals with programming issues related to throttling graphical updates in JavaScript to give the user an optimal experience. We want graphics that have smooth and fluid movement, and that are neither too quick nor too slow. The performance of the user’s computer will influence how fast moving graphics are updated. I’ll also discuss a solution for reducing these apparent speed variations on different machines.

Using setInterval and setTimeout

JavaScript’s setInterval() and setTimeout() functions allow you to call JavaScript code at regular intervals. Applications that require regular graphical updates, such as arcade games, would be difficult, if not impossible, to write without them.

You can call a function repeatedly by passing it as a callback to setInterval():

// This is a callback function.
var bigFunction = function() {
    // Do something...
    // This code needs to be called regularly.
    // It takes 20ms to execute
};

// setInterval will attempt to call bigFunction() every 50 milliseconds.
setInterval(bigFunction, 50);

Notice that bigFunction() takes 20 milliseconds (ms) to execute. What happens if a smaller interval is used instead?

setInterval(bigFunction, 15);

It might seem that the 20ms bigFunction() will be called again before the first callback has even returned. In reality, the new callback will be queued until after the first callback has finished.

What happens if the delay is reduced further?

setInterval(bigFunction, 5);

It would be reasonable ...

The best content for your career. Discover unlimited learning on demand for around $1/day.