Where's the Poll Interval?

You might wonder why, after all this talk about setting a poll interval, our code jumps right in with a request to the server; where's the time delay? The answer is that we don't want a time delay on the very first request. If users click the button and there's a ten-second delay before anything happens, they'll think the app is broken. We want delays between all the subsequent requests that occur once the application is running, but when the user first clicks that button, we want the polling to start right away.

The only difference between doPoll in this version of our app monitor and the one we saw in the last chapter is the use of self to prefix the properties of the class, and the call to setTimeout. Take a look:

Example 3.14. appmonitor2.js (excerpt)
 
this.doPoll = function() {
  var self = Monitor;
  var url = self.targetURL;
  var start = new Date();
  self.reqStatus.startProc();
  self.start = start.getTime();
  self.ajax.doGet(self.targetURL + '?start=' + self.start,
      self.showPoll);
  self.timeoutHand = setTimeout(self.handleTimeout,
      self.timeoutThreshold * 1000);
};

Our call to setTimeout instructs the browser to call handleTimeout once the timeout threshold has passed. We're also keeping track of the interval ID that's returned, so we can cancel our call to handleTimeout when the response is received by showPoll.

Here's the code for the showPoll method, which handles the response from the server:

Example 3.15. appmonitor2.js (excerpt)
 
this.showPoll = function(str) {
  var self = Monitor;
  var diff = 0;
  var end = new Date();
  clearTimeout(self.timeoutHand);
  self.reqStatus.stopProc(true);
  if (str == 'ok') {
    end = end.getTime();
    diff = (end - self.start) / 1000;
  }
  if (self.updatePollArray(diff)) {
    self.printResult();
  }
  self.doPollDelay();
};

The first thing this method does is cancel the delayed call to handleTimeout that was made at the end of doPoll. After this, we tell our instance of the Status class to stop its animation (we'll be looking at the details of this a little later).

After these calls, showPoll checks to make sure that the response is ok, then calculates how long that response took to come back from the server. The error handling capabilities of the Ajax class should handle errors from the server, so our script shouldn't return anything other than ok ... though it never hurts to make sure!

Once it has calculated the response time, showPoll records that response time with updatePollArray, then displays the result with printResult. We'll look at both of these methods in the next section.

Finally, we schedule another poll in doPollDelay -- a very simple method that schedules another call to doPoll once the poll interval has passed:

Example 3.16. appmonitor2.js (excerpt)
 
this.doPollDelay = function() {
  var self = Monitor;
  self.pollHand = setTimeout(self.doPoll,
      self.pollInterval * 1000);
};

To check our progress up to this point, we'll need to add a few more stub methods. First, let's add startProc and stopProc to the Status class:

Example 3.17. appmonitor2.js (excerpt)
 
var Status = new function() {
  this.init = function() {
    // don't mind me, I'm just a stub ...
  };
  this.startProc = function() {
    // another stub function
  };
  this.stopProc = function() {
    // another stub function
  };
}

Let's also add a few stub methods to our Monitor class:

Example 3.18. appmonitor2.js (excerpt)
 
this.handleTimeout = function() {
  alert("Timeout!");
};
this.updatePollArray = function(responseTime) {
  alert("Recording response time: " + responseTime);
};
this.printResult = function() {
  // empty stub function
};

Now we're ready to test our progress. Open appmonitor2.html in your web browser, click Start, and wait for fakeserver.php to wake from its sleep and send ok back to your page.

You can expect one of two outcomes: either a response is received by your page, and you see a dialog similar to the one shown in Figure 3.3, or you see the timeout message shown in Figure 3.4.

Figure 3.3. A response received by your AJAX application

Share and Enjoy: