set and clear interval

by hansenmc

HTML

<label>How long to run (ms):</label><input id="maxLength" type="input" value="5000"/>
<input id="start" type="button" value="start">
<input id="stop" type="button" value="stop">

<pre id="progress"></pre>

JavaScript

var $progress = $('#progress');

var intervalId;

$('#start').click(function () {
    var maxLength = $('#maxLength').val();
    var beginning = Date.now();
    intervalId = setInterval(function () {
        var now = Date.now();
        var elapsedTime = Date.now() - beginning;
        $progress.append("It has been " + elapsedTime + "ms since started\n");
        if (elapsedTime > maxLength) {
            clearTimeout(intervalId);
            $progress.append("done\n");
        }
    }, 1000);
});

$('#stop').click(function () {
    clearTimeout(intervalId);
    $progress.append("stopped\n");
});