Timer logic — Time’s up

What’s more? We can pop up a dialog after the time is up.

The view in the index.html:

1<div data-role='dialog' id='finish'>
2  <div data-role='content'>
3    到時間了!!
4    <a data-role='button' href='#root'>OK</a>
5  </div>

And we programmtically trigger the page changing with the $.mobile.changePage.

Inside the tick function:

 1TwentyFiveTimer.prototype.tick = function() {
 2  this.counter -= 1; // the real counting down.
 4  if (this.counter < 0)
 5  {
 6    this.counter = 0; // dont forget to set the boundary.
 7    // call the dialog when the counter reaches 0
 8    $.mobile.changePage("#finish");
10    this.stop();
11  }
13  // rest of the existing code.

And since we need to stop the timer after showing the dialog, we add this missing stop method that remove itself from the Universal timer.

1TwentyFiveTimer.prototype.stop = function() {
2  tf.ticker.removeListener(this);


the convertion from counter value to minute:sceond string is something that we can extract. How about create a dedicated object for this task?

What’s next? We’re going to take a look at “About function context”.

overlaied image when clicked on thumbnail

Makzan | Mobile web app dev with phonegap | Table of Content