MMStopWatch.js

Example of using MMStopWatch.js. It's very simple in the end.

by bladnman

HTML

<script src="http://bladnman.com/js/mbmJSUtilities-2.0.js"></script>
<script src="http://bladnman.com/js/MMStopWatch.js"></script>

    <input type=button id="run" value="simplest example" class="runButton" onclick="simplestExample()">
    <input type=button id="run" value="run  timed test" class="runButton" onclick="runTest()">
<div id="log" class="log"></div>



    <p>
        This is an incredibly simple test. We set up 3 timers at the start and then 
        delay calls to print their descriptions (how long they have been running). There are 5 calls
        to this function and at ever call but the first we stop one of the timers.
        <br><br>
        Heck, look at the source here to understand it better. It's really easy.
        
        <br><bR><br>
        <a href="http://metal-sole.com/2012/09/29/timing-things-…pt-a-stopwatch/" target="_blank">Find out more</a>
        
</p>

CSS

.runButton {
        width:   125px;
        margin:  20px;
    }
    .log {
       padding:10px; 
        margin: 20px; 
        border: 1px dotted #ccc; 
        color:#888; 
        font-family: arial; 
        font-size:13px; 
        background: #fbfbfb; 
}
p {
padding : 15px;  
font-family: arial; 
     
}

JavaScript

var delayCount = 0;

function simplestExample() {

    // ALL YOU NEED IS BETWEEN THESE TAGS:
    // -------------------------------------------------------
    // VERY SIMPLE TO SET UP A TIMER
    MMStopWatch.start("Simple Example Timer");

    // CALLING describe ON A TIMER SHOWS ITS CURRENT TIME
    MMStopWatch.describe("Simple Example Timer")

    // VERY SIMPLE TO STOP THOSE TIMERS, TOO
    MMStopWatch.stop("Simple Example Timer");

    // -------------------------------------------------------
    // so that you see something on the screen:
    debugUI("Timers write to the console. To see everything going on, view your console now.<br>To simplify things I am using a personal function called 'debugUI' that does the normal write to console but also writes to a known UI element (log). <br>");
    debugUI("The final timer time", MMStopWatch.describe("Simple Example Timer"));

}


function runTest() {


    MMStopWatch.start("timer 1");

    MMStopWatch.start("timer 2");
    MMStopWatch.start("timer 3");
    setTimeout(delayPrint2, 500);
    setTimeout(delayPrint2, 1500);
    setTimeout(delayPrint2, 2500);
    setTimeout(delayPrint2, 3500);
    setTimeout(delayPrint2, 4500);
}

function delayPrint2() {
    delayCount++;
    debugUI("------------");
    if (delayCount == 2) {
        // VERY SIMPLE TO STOP THOSE TIMERS, TOO
        MMStopWatch.stop("timer 1");
    }

    if (delayCount == 3) {
        MMStopWatch.stop("timer 2");
    }

    if (delayCount == 4) {
        MMStopWatch.stop("timer 3");
    }

    // CALLING describe ON A TIMER SHOWS ITS CURRENT TIME
    debugUI("item1 time", MMStopWatch.describe("timer 1"));
    debugUI("item2 time", MMStopWatch.describe("timer 2"));
    debugUI("item3 time", MMStopWatch.describe("timer 3"));
}