jquery: stopwatch

javascript, jquery

Solution

You can add a small API to the code and attach it using `$.data`:

var api = {
    stop: function() {
        stop.click(); // this should probably be improved, but you get the idea
    }
 };
 $(clock).data('stopwatch', api);

Then use:

$('#clock1').data('stopwatch').stop();

You can also add the `reset` and `start` functions to the API using the same logic. A good thing here is that you can improve the execution code on a coffee break later without changing the way external programs uses the API.

Problem

I'm using the `stopwatch` code I found here: http://www.kellishaver.com/projects/stopwatch/ ``` (function($) { $.fn.stopwatch = function() { var clock = this; var timer = 0; clock.addClass('stopwatch'); //console.log(clock); // This is bit messy, but IE is a crybaby and must be coddled. clock.html('<div class="display"><span class="hr">00</span>:<span class="min">00</span>:<span class="sec">00</span></div>'); clock.append('<input type="button" class="start" value="Start" />'); clock.append('<input type="button" class="stop" value="Stop" />'); clock.append('<input type="button" class="reset" value="Reset" />'); //console.log(clock.html()); // We have to do some searching, so we'll do it here, so we only have to do it once. var h = clock.find('.hr'); var m = clock.find('.min'); var s = clock.find('.sec'); var start = clock.find('.start'); var stop = clock.find('.stop'); var reset = clock.find('.reset'); stop.hide(); start.bind('click', function() { timer = setInterval(do_time, 1000); stop.show(); start.hide(); }); stop.bind('click', function() { clearInterval(timer); timer = 0; start.show(); stop.hide(); }); reset.bind('click', function() { clearInterval(timer); timer = 0; h.html("00"); m.html("00"); s.html("00"); stop.hide(); start.show(); }); function do_time() { // parseInt() doesn't work here... hour = parseFloat(h.text()); minute = parseFloat(m.text()); second = parseFloat(s.text()); second++; if(second > 59) { second = 0; minute = minute + 1; } if(minute > 59) { minute = 0; hour = hour + 1; } h.html("0".substring(hour >= 10) + hour); m.html("0".substring(minute >= 10) + minute); s.html("0".substring(second >= 10) + second); } }; })(jQuery); ``` And I use it like this: ``` <script type="text/javascript"> $('#clock1').stopwatch(); </script> ``` It works fine and I can stop it using the stop button. However I would like to be able to stop it programatically using javascript. Something like this: ``` <script type="text/javascript"> $('#clock1').stop(); </script> ``` I created the `stop` function but I cannot access the `timer` var defined in `stopwatch()`. How can I do it?

Original source