setInterval (iets herhalen)#
Wat is setInterval?
Met
Met
setInterval kun je een functie steeds opnieuw uitvoeren, bijvoorbeeld elke seconde.
Basis voorbeeld:
function zegHallo() {
console.log("Hallo!");
}
// Voer zegHallo uit elke 1000 milliseconden (= 1 seconde)
setInterval(zegHallo, 1000);
Tijd in milliseconden:
1000= 1 seconde2000= 2 seconden500= 0.5 seconde
Opbouw setInterval:
setInterval(functieNaam, tijdInMilliseconden);functieNaam→ welke functie moet worden uitgevoerdtijdInMilliseconden→ hoe lang wachten tussen elke uitvoering
clearInterval (stoppen met herhalen)#
Wat is clearInterval?
Met
Met
clearInterval kun je een timer stoppen die je met setInterval hebt
gestart.
Voorbeeld met start en stop:
HTML:
<p id="teller">0</p>
<button id="startKnop">Start</button>
<button id="stopKnop">Stop</button>
JavaScript:
let count = 0;
let timer; // Hier slaan we de timer
op
function telOp() {
count++;
let teller = document.getElementById("teller");
teller.innerHTML = count;
}
function start() {
timer = setInterval(telOp, 1000);
}
function stop() {
clearInterval(timer);
}
document.getElementById("startKnop").addEventListener("click", start);
document.getElementById("stopKnop").addEventListener("click", stop);
Belangrijk:
- Sla de timer op in een variabele (bijv.
timer) - Gebruik die variabele om de timer te stoppen met
clearInterval(timer)
Tijd formatteren (mm:ss)#
Voor een timer wil je vaak tijd tonen als minuten:seconden, bijvoorbeeld "05:30".
Seconden omzetten naar minuten en seconden:
let totaalSeconden = 125;
// Bereken minuten (afgerond naar beneden)
let minuten = Math.floor(totaalSeconden /
60);
// Bereken resterende seconden
let seconden = totaalSeconden % 60;
console.log(minuten); // 2
console.log(seconden); // 5
% operator (modulo): geeft de rest na deling.
125 % 60 = 5 (want 125 / 60 = 2 met rest 5)
Nul toevoegen voor mooie weergave:
function formatTijd(totaalSeconden) {
let minuten = Math.floor(totaalSeconden
/ 60);
let seconden = totaalSeconden % 60;
// Voeg een 0 toe als het getal kleiner is dan 10
if (minuten < 10) {
minuten = "0" + minuten;
}
if (seconden < 10) {
seconden = "0" + seconden;
}
return minuten + ":" +
seconden;
}
console.log(formatTijd(125)); // "02:05"
console.log(formatTijd(65)); // "01:05"
console.log(formatTijd(5)); // "00:05"Countdown timer#
Een countdown telt af van een bepaalde tijd naar 0.
Simpele countdown van 10 naar 0:
HTML:
<p id="countdown">10</p>
<button id="startKnop">Start</button>
JavaScript:
let tijd = 10;
let timer;
function telAf() {
tijd--;
let countdown = document.getElementById("countdown");
countdown.innerHTML = tijd;
if (tijd === 0) {
clearInterval(timer);
alert("Tijd is
om!");
}
}
function start() {
timer = setInterval(telAf, 1000);
}
document.getElementById("startKnop").addEventListener("click", start);
Wat gebeurt er?
- Elke seconde wordt
tijd--uitgevoerd (aftellen) - De nieuwe tijd wordt getoond
- Als tijd 0 is, stop de timer en toon een melding
Pomodoro timer basis#
Een Pomodoro timer is een werktimer die aftelt. Meestal 25 minuten, maar voor deze opdracht beginnen
we
met 10
seconden om te testen.
Basis Pomodoro (10 seconden):
HTML:
<h1>Pomodoro Timer</h1>
<p id="timer">00:10</p>
<button id="startKnop">Start</button>
<button id="pauseKnop">Pause</button>
<button id="resetKnop">Reset</button>
JavaScript:
let tijd = 10; // 10
seconden
let timer;
function formatTijd(seconden)
{
let min = Math.floor(seconden
/
60);
let sec = seconden % 60;
if (min < 10) min =
"0" + min;
if (sec < 10) sec =
"0" + sec;
return min + ":" + sec;
}
function update() {
let display = document.getElementById("timer");
display.innerHTML = formatTijd(tijd);
}
function telAf() {
tijd--;
update();
if (tijd === 0)
{
clearInterval(timer);
alert("Klaar!");
}
}
function start() {
timer = setInterval(telAf, 1000);
}
function pause() {
clearInterval(timer);
}
function reset() {
clearInterval(timer);
tijd = 10;
update();
}
// Event listeners
document.getElementById("startKnop").addEventListener("click",
start);
document.getElementById("pauseKnop").addEventListener("click",
pause);
document.getElementById("resetKnop").addEventListener("click",
reset);Uitbreiden naar 25:00 timer#
Als je timer werkt met 10 seconden, kun je hem makkelijk uitbreiden naar 25 minuten.
// Verander alleen deze regel:
let tijd = 1500; //
25 minuten
= 25 * 60 = 1500 seconden
// En in de reset functie:
function reset() {
clearInterval(timer);
tijd = 1500; // 25 minuten
update();
}
Omrekenen van minuten naar seconden:
Vermenigvuldig met 60. Bijvoorbeeld: 25 minuten × 60 = 1500 seconden
Vermenigvuldig met 60. Bijvoorbeeld: 25 minuten × 60 = 1500 seconden
Veelgemaakte fouten#
setInterval(functie(), 1000)→setInterval(functie, 1000)(geen haakjes bij functienaam!)- Vergeten de timer op te slaan in een variabele → kun je hem niet stoppen
- Timer niet stoppen als tijd 0 is → blijft doorlopen naar negatieve getallen
- Tijd in seconden in plaats van milliseconden → gebruik 1000 voor 1 seconde
- Vergeten
update()aan te roepen bij reset → timer toont oude waarde
Stappenplan Pomodoro Timer#
- Maak een variabele
tijd = 10(voor testen) - Maak een
formatTijd()functie die seconden omzet naar "mm:ss" - Maak een
update()functie die de tijd op het scherm zet - Maak een
telAf()functie die:tijd--doetupdate()aanroept- Checkt of
tijd === 0en dan de timer stopt
- Maak een
start()functie metsetInterval(telAf, 1000) - Maak een
pause()functie metclearInterval(timer) - Maak een
reset()functie die tijd terugzet naar 10 enupdate()aanroept - Koppel alle knoppen aan de juiste functies met
addEventListener - Extra: Verander 10 naar 1500 voor een echte 25-minuten timer