Extending Tchatshke Gulch with a Timer

Advanced

So while we’re on the topic of timers, it occurs to me that it would be helpful to see how you might use one in a more extensive way than to tell time.

Perhaps you recall Tchatshke Gulch, the “world’s smallest online marketplace” application from Chapter 7, “ Working with Objects.” I certainly hope so!

One flaw in the original Tchatshke Gulch application is that bidding wasn’t automatically updated. To update the bids, you had to click the Update Bids button (although all bids were automatically updated to their proxy maximum when the auction was closed). Even worse, the function behind the Update Bids button just updated bid amounts by one round, so if you wanted to show the true state of affairs (everyone up to their proxy maximums except the high bidder), you’d have to keep clicking away.

It’s easy to fix this with a timer using the setInterval and clearInterval methods. Using a timer, the Auction.Update method currently in place can be left more or less intact. It just needs to be invoked periodically, say, once a second. After a relatively short amount of time, all bids will be correctly updated to reflect their proxy maximums except the high bidder, whose bid will be incrementally higher than the next-highest proxy bid (see Figure 8-12).

Figure 8-12: The setInterval method is used to automatically update proxy bids.

Because Tchatshke Gulch is a long program, I’m not going show the entire revised code listing, most of which would just be a repeat of Listing 7-13, anyhow. You can always download the revised code from the Downloads section at http://www.apress.com.

Here are the steps to take:

1. Get rid of the Update Bids button—we won’t be needing it!

2. Create a variable outside any function to reference the timer identification:

    var timerID; 

3. In the createAuction function, start the timer with an interval of 1 second (equals 1,000 milliseconds), tell the timer to execute the Auction instance’s updateBids method and save the timer identification:

    timerID = setInterval("theAuction.updateBids()", 1000); 

4. Modify the updateBids method to make sure that it doesn’t do anything unless there has actually been at least one bid (otherwise, you’ll get a syntax error when the program attempts to operate on the array of bids, which doesn’t exist yet):

    function update_Bids () {     if (this.bidArray.length > 0) {     // former updateBids code goes here      ...      }  } 

5. Clear the timer as a first step in the endAuction method: clearInterval(timerID);

Demonstrably, this is not much trouble for what’s really a big improvement to the program.

It’s clear that it makes sense to think of a timer as a gizmo that fires events periodically (or at a specified time) rather than in response to a user action or system event. Actually, that’s very cool and groovy.