# Timing functions

method	description
`window.setTimeout(cb, <delay>)` (opens new window)	execute the callback function (`cb`) once after a fixed `<delay>` in `ms`
`window.setInterval(cb, <delay>)` (opens new window)	execute the callback function (`cb`) repeatedly with a fixed `<delay>` in `ms`
`window.clearInterval(<intervalId>)` (opens new window)	cancels an action that was established with `setInterval()`

REMARKS

The window prefix is optional and can be left out
setTimeout() is often used in examples to simulate a delay in the retrieval of external data
To use clearInterval(), you have to bind setInterval() to a variable first

let timer = setInterval(function () {
    // execute this code every 3 seconds
}, 3000);

document.getElementById('cancelTimer').addEventListener('click', function(e) {
    clearInterval(timer); // cancel the timer
});
 
        Copied!

1
2
3
4
5
6
7

setInterval() starts for the first time after <delay> ms
- Use an external callback function to start the function immediately and then repeatedly after x ms

function cb() {
    // execute this code immediately and then every 3 seconds
}

cb(); // start cb() immediately
setInterval(cb, 3000);  // run cb() every 3 seconds

 
        Copied!

1
2
3
4
5
6
7

# Examples

# Analog + digital clock

Open es6/timing/clock.html and es6/timing/clock.js
The clock is written as an SVG image wich contains four elements that change over time
- text#digitalTime shows the time with toLocaleTimeString() (opens new window)
- line#sec rotates 6 degrees per second
- line#min rotates 6 degrees per minute
- line#hour rotates 30 degrees per hour + 0.5 degrees per minute

REMARK

Rotating SVG shapes differs from the CSS transform: rotate() method
- An SVG rotation is defined as an attribute of the elements (line, rect, ...) within the <svg> tag:
  <line ... transform="rotate(angle, x-rotationPoint, y-rotationPoint)">
- Besides the angle, also the rotation point can be specified

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet" />
        <style>
            #digitalTime {
                font-family: 'Iceland', cursive;
                font-size: 2rem;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        ...
        <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
            <circle cx="150" cy="150" r="146" fill="#a5d8d4" stroke="#528393" stroke-width="4" />
            <circle cx="150" cy="20" r="4" fill="#528393" />
            <circle cx="20" cy="150" r="4" fill="#528393" />
            <circle cx="150" cy="280" r="4" fill="#528393" />
            <circle cx="280" cy="150" r="4" fill="#528393" />
            <!-- digital clock -->
            <text id="digitalTime" x="50%" y="30%" text-anchor="middle" fill="brown">00:00:00</text>
            <!-- analog clock -->
            <line id="hour" x1="150" y1="60" x2="150" y2="170" stroke="brown" stroke-width="9" />
            <line id="min" x1="150" y1="20" x2="150" y2="180" stroke="brown" stroke-width="7" />
            <line id="sec" x1="150" y1="20" x2="150" y2="190" stroke="black" />
            <circle cx="150" cy="150" r="8" fill="brown" />
        </svg>
        ...
        <script src="clock.js"></script>
    </body>
</html>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

function clock() {
    // make new Date-object containing the current date/time
    const now = new Date();

    // DIGITAL clock
    // select the (text) element for the digital clock and give it the correct content 
    // now.toLocaleTimeString('en-GB') converts now to HH:MM:SS format
    document.getElementById('digitalTime').textContent = now.toLocaleTimeString('en-GB');
    
    // ANALOG clock
    // get seconds, minutes and hours (0-12) from the object now
    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours() % 12; // convert 24 hours to 12 hours

    // select the (line) elements for the hands of the analog clock and rotate them according to the values of seconds, minutes and hours
    // 1 second (360/60 = 6 degrees)
    document.getElementById('sec').setAttribute('transform', `rotate(${seconds * 6}, 150, 150)`);
    // 1 minute (= 6 degrees)
    document.getElementById('min').setAttribute('transform', `rotate(${minutes * 6}, 150, 150)`);
    // 1 hour (360/12 = 30 degrees) + .5 degrees for every minute (every 60 minutes an additional 30 degrees)
    document.getElementById('hour').setAttribute('transform', `rotate(${hours * 30 + minutes * 0.5}, 150, 150)`);
}

clock(); // start clock() immediately
setInterval(clock, 1000); // execute clock() repeatedly (every second = 1000ms)
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Reaction test

Open es6/timing/reaction.html and es6/timing/reaction.js

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <style>
            #block {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10000;
                width: 50px;
                height: 50px;
                background-color: rgba(122, 210, 83, 0.8);
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        ...
        <main class="container">
            ...
            <div id="block"></div>
            <div class="border-gray">
                <p>Click on the green box as quickly as you can. Your reaction time will be posted below:</p>
                <p>Your Reaction Time is: <b id="reaction"></b></p>
            </div>
            ...
        </main>
        ...
    </body>
</html>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// max left position of #block: screen width - width of the block
let maxLeftPosition = window.innerWidth - 50;
let maxTopPosition = window.innerHeight - 50;

// start the timer
let timer = new Date();

const block = document.getElementById('block');

block.addEventListener('click', function () {
    // calculate the time between block shown and block clicked
    document.getElementById('reaction').textContent = `${(new Date() - timer) / 1000} sec`;
    // hide the block
    block.style.display = 'none';
    // move the block to a random position
    block.style.left = `${maxLeftPosition * Math.random()}px`;
    block.style.top = `${maxTopPosition * Math.random()}px`;
    // wait between 2 and 5 seconds to show the block at the new position
    const waitTime = (Math.random() * 3 + 2) * 1000;
    setTimeout(function () {
        // show the block and restart the timer
        block.style.display = 'block';
        // reset the start time
        timer = new Date();
    }, waitTime);
});

// add event listener on resizing the screen
window.addEventListener('resize', function (e) {
    // recalculate maxLeftPosition and maxTopPosition
    maxLeftPosition = window.innerWidth - 50;
    maxTopPosition = window.innerHeight - 50;
    console.clear();
    console.log('maxLeftPosition', maxLeftPosition, 'maxTopPosition', maxTopPosition);
    // move the block to the top left corner and restart the timer
    block.style.display = 'block';
    block.style.left = '0px';
    block.style.top = '0px';
    timer = new Date();
});
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40