setTimeout example 1

A basic timer (3s) that can be stopped at any time

by Arnaud Buchholz

HTML

<input type="button" value="Start" id="start">
<input type="button" value="Stop" id="stop">
<div id="timer">
  0
</div>
<div id="status"></div>

CSS

input[type=button] {
  font-family: verdana, arial, sans-serif;
  font-size: 16px;
  border: 0;
  background-color: white;
}

#timer {
  font-family: verdana, arial, sans-serif;
  font-size: 32px;
}

#status {
  font-family: verdana, arial, sans-serif;
  font-size: 16px;
}

JavaScript

var timerId,
    timerDisplay = document.getElementById("timer"),
    statusDisplay = document.getElementById("status"),
    startButton = document.getElementById("start"),
    stopButton = document.getElementById("stop");

startButton.addEventListener("click", function () {
    if (timerId) {
        return; // already started
    }
    timerDisplay.innerHTML = 3;
    timerId = setTimeout(onTick, 1000);
    statusDisplay.innerHTML = "started: " + timerId;
});

stopButton.addEventListener("click", function () {
    if (!timerId) {
        return; // already stopeed
    }
    clearTimeout(timerId);
    timerId = 0;
    statusDisplay.innerHTML = "stopped";
});

function onTick() {
    var count = parseInt(timerDisplay.innerHTML, 10);
    timerDisplay.innerHTML = --count;
    if (0 < count) {
        timerId = setTimeout(onTick, 1000);
        statusDisplay.innerHTML = "ticked: " + timerId;
    } else {
        timerId = 0;
        statusDisplay.innerHTML = "ended";
    }
}