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:

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

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

Inside the tick function:

 TwentyFiveTimer.prototype.tick = function() {
   this.counter -= 1; // the real counting down.
 
   if (this.counter < 0)
   {
     this.counter = 0; // dont forget to set the boundary.
     // call the dialog when the counter reaches 0
     $.mobile.changePage("#finish");
 
    this.stop();
  }

  // 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.

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

Exercise

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”.