As we keep track of the interval IDs of both calls, we can modify stopPoll to handle these scenarios with two calls to clearTimeout:
Example 3.29. appmonitor2.js (excerpt)
this.stopPoll = function() {
var self = Monitor;
clearTimeout(self.pollHand);
if (self.ajax) {
self.ajax.abort();
}
clearTimeout(self.timeoutHand);
return true;
};
Now, you should be able to stop and start the polling process just by clicking the Start/Stop button beneath the bar graph.
Status Notifications
The ability of AJAX to update content asynchronously, and the fact that updates may affect only small areas of the page, make the display of status notifications a critical part of an AJAX app's design and development. After all, your app's users need to know what the app is doing.
Back in the old days of web development, when an entire page had to reload in order to reflect any changes to its content, it was perfectly clear to end users when the application was communicating with the server. But our AJAX web apps can talk to the server in the background, which means that users don't see the complete page reload that would otherwise indicate that something was happening.
So, how will users of your AJAX app know that the page is communicating with the server? Well, instead of the old spinning globe or waving flag animations that display in the browser chrome, AJAX applications typically notify users that processing is under way with the aid of small animations or visual transitions. Usually achieved with CSS, these transitions catch users' eyes -- without being distracting! -- and provide hints about what the application is doing. An important aspect of the good AJAX app design is the development of these kinds of notifications.
The Status Animation
Since we already have at the top of our application a small bar that tells the user if the app is running or stopped, this is a fairly logical place to display a little more status information.
Animations like twirling balls or running dogs are a nice way to indicate that an application is busy -- generally, you'll want to display an image that uses movement to indicate activity. However, we don't want to use a cue that's going to draw users' attention away from the list, or drive people to distraction as they're trying to read the results, so we'll just go with the slow, pulsing animation shown in Figure 3.8.
This animation has the added advantages of being lightweight and easy to implement in CSS -- no Flash player is required, and there's no bulky GIF [45] image to download frame by tedious frame.
The far right-hand side of the white bar is unused space, which makes it an ideal place for this kind of notification: it's at the top of the user interface, so it's easy to see, but it's off to the right, so it's out of the way of people who are trying to read the list of results.
Figure 3.8. Our pulsing status animation
To host this animation, we'll add a div with the ID pollingMessage just below the status message div in our document:
Example 3.30. appmonitor2.html (excerpt)
<body>
<div id="statusMessage">App Status:
<span id="currentAppState"></span>
</div>
<div id="pollingMessage"></div>
<div id="pollResults"></div>
<div id="buttonArea"></div>
</body>
Add a CSS rule to your style sheet to position this div:
Example 3.31. appmonitor2.css (excerpt)
#pollingMessage {
float: right;
width: 80px;
padding: 0.2em;
text-align: center;
}
This animation is now positioned to the right of the page.
Share and Enjoy:
