concept timer in category javascript

This is an excerpt from Manning's book JavaScript on Things: Hacking hardware for web developers. Login to get full access to this book.

Figure 5.17. Wiring diagram of timer including potentiometer and LCD placement

Programming the timer’s logic

Our LCD circuitry is ready. It’s time to program the timer. We’ll break this down into chunks, but an overview of the timer’s eventual structure is shown here.

Listing 5.17. Overview of timer application structure

const five = require('johnny-five'); const board = new five.Board(); // constants board.on('ready', () => { // Initialize J5 components for buttons and LCD // Initialize some variables function init () { // initialize timer } function showRemaining () { // format remaining timer duration and // update LCD display } function adjustTime (delta) { // add or remove delta milliseconds // to/from timer duration } function start () { // start the timer // use setInterval to invoke tick() } function pause () { // pause the timer } function tick () { // update timer values internally // if timer is over, chime() and reset timer // otherwise, showRemaining() } function chime () { // pulse the indicator LED } // add button-press handlers // initialize the timer });

copy

Jumping in from the top, a section of variable initialization sets up some of the values we’ll need for operating the timer, as shown in the following listing. Add these to timer-advanced.js.

Listing 5.18. Setting up some values

const five = require('johnny-five'); const board = new five.Board(); const DEFAULT_TIMER = 60000; 1 const UPPER_LIMIT = 99 * 60000; 2 const LOWER_LIMIT = 1000; 3 board.on('ready', () => { const downButton = new five.Button(2); const upButton = new five.Button(3); const goButton = new five.Button(4); const lcd = new five.LCD([7, 8, 9, 10, 11, 12]); const alertLED = new five.Led(6); var remaining, timer, timeString, lastTimeString, timestamp, lastTimestamp; // ... });

copy

This is an excerpt from Manning's book Secrets of the JavaScript Ninja, Second Edition. Login to get full access to this book.

Figure 1.1. Client-side web applications rely on the infrastructure provided by the browser. We’ll particularly focus on the DOM, events, timers, and browser APIs.

Listing 5.4. Using a closure in a timer interval callback

<div id="box1">First Box</div> #A <script> function animateIt(elementId) { var elem = document.getElementById(elementId); #B var tick = 0; #C var timer = setInterval(function(){ #D if (tick < 100) { #E elem.style.left = elem.style.top = tick + "px"; #E tick++; #E } #E else { clearInterval(timer); assert(tick === 100, #F "Tick accessed via a closure."); assert(elem, "Element also accessed via a closure."); assert(timer, "Timer reference also obtained via a closure." ); } }, 10); #G } animateIt("box1"); #H </script> #A - Creates the element that we’re going to animate #B - Inside the animateIt function, we get a reference to that element. #C - Establishes a counter to keep track of animation ticks (steps) #D - A built-in function that creates and starts an interval timer, given a callback #E - The timer callback is invoked every 10 milliseconds. For 100 ticks, it adjusts the position of the element. #F - After 100 ticks, we stop the timer and perform tests to assert that we can see all relevant variables needed to perform the animation. #G - The setInterval duration—the callback will be called every 10ms. #H - Now that it’s all set up, we set it in motion!

copy

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.

You’ve already examined exactly what happens when an event occurs. But timers are different from standard events, so let’s explore an example similar to the ones you’ve seen so far. The following listing shows the code used for this example.

This is an excerpt from Manning's book Node.js in Practice. Login to get full access to this book.

2.4. Delaying execution with timers

Node implements the JavaScript timer functions setTimeout, setInterval, clear-Timeout, and clearInterval. These functions are globally available. Although they’re part of JavaScript as defined by Mozilla, they’re not defined in the ECMAScript standard. Instead, timers are part of the HTML DOM Level 0 specification.

Listing 2.20 uses setTimeout to simulate a long-running operation that will keep the program running while the timer displays the process’s memory usage. Once the timeout’s delay has been reached, the program will exit without calling clearTimeout.

Listing 2.20. Keeping a timer alive until the program cleanly exits