patternjavascriptMinor

Managing a stopwatch mobile app

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

stopwatchmanagingmobileapp

Problem

I'm using the following pattern in my mobile app. The code snippet below manages a stopwatch.

Is there a way to simplify the code for better readability and probably getting away from needing to use MyApp.stopwatch. inside it? Somehow in some cases using this instead works, and in some it doesn't.

And what about getting rid of using repeating var settings = MyApp.stopwatch.settings?

```
(function (MyApp, $, undefined) {

// Using strict mode to throw exceptions for 'unsafe' actions and coding patterns
'use strict';

// Initializes app
function init() {
MyApp.stopwatch.init('startStopwatch', 'pauseStopwatch', 'resetStopwatch');
}

// Manages the stopwatch
MyApp.stopwatch = {

init: function (startButton, pauseButton, resetButton) {
document.getElementById(startButton).addEventListener('click', MyApp.stopwatch.startTimer, false);
document.getElementById(pauseButton).addEventListener('click', MyApp.stopwatch.pauseTimer, false);
document.getElementById(resetButton).addEventListener('click', MyApp.stopwatch.resetTimer, false);

MyApp.stopwatch.displayTimer();
},

settings: {
timerId: -1,
interval: 100,
millis: 0,
seconds: 0,
minutes: 0
},

displayTimer: function () {
// ARE THESE REPEATING DECLARATIONS REALLY NEEDED?
var settings = MyApp.stopwatch.settings,
millis = Math.round(settings.millis / 100).toFixed(0),
seconds = settings.seconds,
minutes = settings.minutes;

if (seconds = 1000) {
settings.millis = 0;
settings.seconds += 1;
}
if (settings.seconds >= 60) {
settings.millis = 0;
settings.seconds = 0;
settings.minutes += 1;

Solution

This is what I came up with (untested):

I got rid of your settings-stuff, introduced a variable self so there's no interference with this, moved your initialization code to the only place it is (and can ever be) called from, extracted a method for padding and event handler registration and fixed your updateTimer so it works for values > 1000 (it's not fit for negative values, though). I hope you like it...

(function (MyApp, $, undefined) {
    // Using strict mode to throw exceptions for 'unsafe' actions and coding patterns
    'use strict';

    function addClickHandlerToButton(buttonId, handler) {
        document.getElementById(buttonId).addEventListener('click', handler, false);
    }

    function padLeft(number) {
        number = +number;
        return (number = 1000) {
                seconds += millis / 1000;
                millis %= 1000;
            }
            if (seconds >= 60) {
                minutes += seconds / 60;
                seconds %= 60;
            }
            displayTimer();
        },

        pauseTimer = function () {
            window.clearInterval(timerId);
            timerId = -1;
        },

        startTimer = function () {
            if (timerId === -1) {
                timerId = window.setInterval(updateTimer, interval);
            }
        },

        resetTimer = function () {
            pauseTimer();
            millis = 0;
            seconds = 0;
            minutes = 0;
            displayTimer();
        };

        return function (startButton, pauseButton, resetButton) {
            addClickHandlerToButton(startButton, startTimer)
            addClickHandlerToButton(pauseButton, pauseTimer)
            addClickHandlerToButton(resetButton, stopTimer)
            displayTimer();
        };
    })();

    // PhoneGap, jQuery & device is ready now -> initialize
    $(document).on('deviceready', function() {
        stopwatch('startStopwatch', 'pauseStopwatch', 'resetStopwatch');
    });

}(window.MyApp = window.MyApp || {}, jQuery));

EDIT 1+2: updated the code to integrate suggestions from the comments by the OP and fix errors.

Code Snippets

(function (MyApp, $, undefined) {
    // Using strict mode to throw exceptions for 'unsafe' actions and coding patterns
    'use strict';

    function addClickHandlerToButton(buttonId, handler) {
        document.getElementById(buttonId).addEventListener('click', handler, false);
    }

    function padLeft(number) {
        number = +number;
        return (number < 10 ? '0' : '') + Math.floor(number);
    }

    // Manages the stopwatch
    var stopwatch = (function(){
        var minutes = 0,
            seconds = 0,
            millis = 0,
            interval = 100,
            timerId = -1,
        displayTimer = function () {
            document.getElementById('stopwatch').innerHTML =
                padLeft(minutes) + ':' +
                padLeft(seconds) + ':' +
                Math.floor(millis);
        },

        updateTimer = function () {
            millis += interval;
            if (millis >= 1000) {
                seconds += millis / 1000;
                millis %= 1000;
            }
            if (seconds >= 60) {
                minutes += seconds / 60;
                seconds %= 60;
            }
            displayTimer();
        },

        pauseTimer = function () {
            window.clearInterval(timerId);
            timerId = -1;
        },

        startTimer = function () {
            if (timerId === -1) {
                timerId = window.setInterval(updateTimer, interval);
            }
        },

        resetTimer = function () {
            pauseTimer();
            millis = 0;
            seconds = 0;
            minutes = 0;
            displayTimer();
        };

        return function (startButton, pauseButton, resetButton) {
            addClickHandlerToButton(startButton, startTimer)
            addClickHandlerToButton(pauseButton, pauseTimer)
            addClickHandlerToButton(resetButton, stopTimer)
            displayTimer();
        };
    })();

    // PhoneGap, jQuery & device is ready now -> initialize
    $(document).on('deviceready', function() {
        stopwatch('startStopwatch', 'pauseStopwatch', 'resetStopwatch');
    });

}(window.MyApp = window.MyApp || {}, jQuery));

Context

StackExchange Code Review Q#14157, answer score: 2

Revisions (0)

No revisions yet.