Simple JavaScript Timer: Part II

In the last part, of ‘Simple JavaScript Timer: Part I’, the asynchronous function was running as soon as the page was loaded. A few reasons why I assumed this was happening:

  • Since there were no synchronous calls, there was nothing on the call stack and therefore it just ran
  • Maybe some sort of mechanism was needed to prevent this from occurring

However, the real reason was that I’d invoked the setInterval() function and assigned it’s return to a variable (erroneously thinking I’d created a named function by assigning an anonymous function to a variable, which was contained within the setInterval()). So the asynchronous setInterval() was running when the script loaded and updated the innerHTML of the element it was attached to. [see commit]

This was sorted by enclosing the setInterval call within a function and then invoking that on the button’s onclick event. [see commit] The next item was to stop the timer once it was started. But that had its own issue in that the timer would not stop. Turned out that the id returned by the setInterval function was scoped to the first conditional branch and would not transfer over to the second conditional:

Asynchronous JavaScript: setInterval and clearInterval

Asynchronous JavaScript: setInterval & clearInterval

Placing the variable outside the conditionals, but still within the function body, resulted in the same thing. The variable had to be declared outside the function’s scope – read more about scope here – as declaring the variable without the var keyword still does not set its scope to global. The latest commit with all the issue fixes can be found in this commit [see commit].

So that still leaves the two outstanding requirements from the first post, as well as a new one (which is just to refactor the two buttons to just one for starting and stopping the timer):

  • Being able to capture snapshots of the timer countdown on a button press.
  • Clearing the snapshots and resetting the timer on another button press.

See the demo in action on the Github page here: https://donyd.github.io/Simple-Timer/

Simple JavaScript Timer: Part I

Ok following along the heels of the last mini project run down ‘Binary to Decimal Convertor‘ is a JavaScript Timer.

This project will borrow items and techniques learned from that excursion, one of which is how to showcase the various stages of the development process that shaped it. To that end, instead of codepen.io, github pages will be used. For the moment the source files can be found here: https://github.com/donyd/Simple-Timer and the commits will show the various stages involved as the project progresses.

Observances

  • So the same thing that tripped me up in the the Binary to Decimal Convertor happened here – I was trying to push a value into an HTML element instead of using the innerHTML property.
  • I’ve wired up a function timeElapsed to the onclick event of a button, however it seems to be running when the page is loaded.

So the next order of business is to correct the issue so the function is only triggered on the onclick event of the button it is attached to as well as the following:

  • Being able to capture snapshots of the timer countdown on a button press.
  • Clearing the snapshots and resetting the timer on another button press.