CIS 119 Timers

Objectives

Use the setInterval function
Use the setTimeout function
Clear a timer set by setInterval

Using timers

setTimeout(func, n): used to run function func in x milliseconds; it returns a reference to the timer which can be passed to clearTimeout to stop the timer
clearTimeout(timer): clears the specified timeout timer
setInterval(func, n): used to run function func every x milliseconds; it returns a reference to the timer which can be passed to clearInterval to stop the timer
clearInterval(timer): clears the specified interval timer
Example of using setTimeout to trigger a function in one second: setTimeout(trouble, 1000);
Example of using setInterval to trigger a function every second: setInterval(trouble, 1000);

Example of setTimeout, setInterval, clearInterval

See more sophistcated versions at date4.html and date8.html.

Code for example

function pad(str, cols, ch) {
    while ((""+str).length < cols) str = ch + str;
    return str;
}

function getTimeString() {
    let now = new Date();
    let hours = now.getHours();
    let ampm = "";
    if (hours >= 12) ampm = " pm";
    else ampm = " am";
    if (hours == 0) hours = 12;
    else if (hours > 12) hours -= 12;
    let strDisplay = hours + ':' + pad(now.getMinutes(), 2, '0')
        + ':' + pad(now.getSeconds(), 2, '0') + ampm;
    return strDisplay;
}

function displayTime1() {
    document.getElementById("clock1").value = getTimeString();
    setTimeout(displayTime1, 1000);
}

function displayTime2() {
    document.getElementById("clock2").value = getTimeString();
}

window.onload = function() {
    displayTime1();
    let timer = setInterval(displayTime2, 1000);
    document.getElementById('btnStop').onclick = function() {
        let btn = document.getElementById('btnStop');
        if (btn.value == "Stop clock") {
            clearInterval(timer);
            btn.value = "Start clock";
        } else {
            displayTime2();
            btn.value = "Stop clock";
            timer = setInterval(displayTime2, 1000);
        }
    };
};