Timers in Javascript

Wat is een timer

Soms wil je een bepaalde actie na een aantal seconden uitvoeren. Dit omdat je bijvoorbeeld een quiz maakt en de gebruiker 20 seconden de tijd wilt geven om een antwoord te kiezen. Of soms wil je een aantal seconden wachten om te zien of je informatie van een andere webserver terug krijgt.
Er zijn ook websites die kijken of je nog wel actief bent, ben je 15 minuten inactief (bijvoorbeeld bij de website van de belastingdienst als je ingelogd bent) dan wordt je automatisch uitgelogd.

Omdat voor elkaar te krijgen gebruiken we setTimeout en setInterval. Twee JavaScript functies om dit voor elkaar te krijgen. Ze lijken op elkaar, maar hebben een verschillende werking.

• setTimeout functie gebruik je om eenmalig een functie uit te voeren
• setInterval functie gebruik je om na elke x-tijd een functie uit te herhalen

setTimeout

function sayHi() {
    alert('Hello world!');
}

let timerId = setTimeout(sayHi, 1000);

Functie met argumenten

Soms wil je ook informatie meegegeven aan de functie, je moet/ kan hiervoor de setTimeout die argumenten meegeven, maar niet in de functie zelf, maar na de tijd van de timer.

function sayHi(userName, userAge) {
    alert(`Hello ${userName}! You are ${userAge} years old`);
}

let nameOfTheUser = 'Jean Luc';
let ageOfTheUser = 56;
let timerId = setTimeout(sayHi, 750, nameOfTheUser, ageOfTheUser);
//Bovenstaande code voert de functie sayHi uit, na 750 milliseconden en
//de functie wordt aangeroepen met 2 argumenten, nameOfTheUser en ageOfTheUser

LET OP!

Je kan oneindig veel argumenten mee geven, elke nieuwe argument van je functie voeg je aan het einde van de setTimeout functie neer.

Functie aanroepen, niet uitvoeren

function sayHi() {
    alert('Hello world!');
}

let timerId = setTimeout(sayHi(), 1000);

Een timeout stoppen

Zoals je boven hebt kunnen lezen kan je een timeout ook annuleren, bijvoorbeeld als de gebruiker antwoord gegeven heeft op je vraag of hij niet meer inactief is. Daarvoor gebruiken we de functie clearInterval

function sayHi() {
    alert('Hello world!');
}

let timerId = setTimeout(sayHi, 1000);
clearInterval(timerId);

de setInterval functie

De setInterval functie werkt exact hetzelfde als de setTimeout (zelfde syntax, oplossingen ed.) Het enige verschil is dat de setTimeout maar 1 keer uitgevoerd wordt na de opgegeven tijd en de setInterval zich elke keer herhaalt tot je de clearTimeout functie aanroept.

const timesToRun = 5;
let timesRun = 0;
let timerId;

function showConsoleMessage() {
    timesRun++;
    console.log('De console functie is aangeroepen');

    if (timesRun === timesToRun) {
        clearInterval(timerId);
    }
}

timerId = setInterval(showConsoleMessage, 500);