JAVASCRIPT Timers
Timer
setTimeout
Vi kan skapa en timer med, setTimeout( minFunktion, tidTillNästaAnropAvFunktionen); . Där tiden till nästa anrop anges i millisekunder. Lägger vi även till en variabel som får en koppling till timern så kan vi stänga av den. Med setTimeout så skapar vi ett anrop till en funktion.
var id;
...
id = setTimeout(jsex3_start,1000);
...
...
clearTimeout(id);
OBS! Det är FEL att skriva på följande sätt:
id = setTimeout(jsex3_start(),1000);
Vi visar med ett simpelt tidtagarur som har en liten bugg i sig genom att första sekunden går alldeles för snabbt, men detta lämnas till dig att fixa :-) .
<label>Tidtagarur (minuter:sekunder)</label><br>
<input type="text" id="jsex3text" size="20" value="0:00"><br>
<button type="button" id="jsex3_start_button">Start</button>
<button type="button" id="jsex3_stopp_button">Stopp</button>
<button type="button" id="jsex3_nollning_button">Nolla räknare</button>
<script>
var start1 = document.getElementById('jsex3_start_button');
var stopp1 = document.getElementById('jsex3_stopp_button');
var noll1 = document.getElementById('jsex3_nollning_button');
start1.addEventListener('click',jsex3_start);
stopp1.addEventListener('click', jsex3_stopp);
noll1.addEventListener('click',jsex3_nollning);
var antalSekunder=0;
var id;
function jsex3_start() {
"use strict";
antalSekunder++;
var minut= parseInt(antalSekunder/60);
var sekund=antalSekunder-minut*60;
if (sekund < 10) {
sekund = "0"+sekund;
}
var temp = minut+":"+sekund;
document.getElementById("jsex3text").value = temp;
id = setTimeout(jsex3_start,1000);
}
function jsex3_stopp() {
"use strict";
clearTimeout(id);
}
function jsex3_nollning() {
"use strict";
antalSekunder=0;
document.getElementById("jsex3text").value = "0:00";
}
<script>setInterval
Vi kan skapa en timer med, setInterval( minFunktion, tidTillNästaAnropAvFunktionen); . Där tiden till nästa anrop anges i millisekunder. Lägger vi även till en variabel som får en koppling till timern så kan vi stänga av den. Skillnaden mot setTimeout är att här startar man en timer som anropar en funktion med ett visst tidsintervall tills man stänger av timern.
var id;
...
id = setInterval(jsex6_klocka,1000);
...
...
clearInterval(id);
Vi visar med ett simpelt tidtagarur som har en liten bugg i sig genom att första sekunden går alldeles för snabbt, men detta lämnas till dig att fixa :-) .
<label>Tidtagarur (minuter:sekunder)</label><br>
<input type="text" id="jsex6text" size="20" value="0:00"><br>
<button type="button" id="jsex6_start_button">Start</button>
<button type="button" id="jsex6_stopp_button">Stopp</button>
<button type="button" id="jsex6_nollning_button">Nolla räknare</button>
<script>
document.getElementById('jsex6_start_button').addEventListener('click',jsex6_start);
document.getElementById('jsex6_stopp_button').addEventListener('click',jsex6_stopp);
document.getElementById('jsex6_nollning_button').addEventListener('click', jsex6_nollning);
var antalSekunder=0;
var id;
function jsex6_klocka() {
"use strict";
antalSekunder++;
var minut= parseInt(antalSekunder/60);
var sekund=antalSekunder-minut*60;
if (sekund < 10) {
sekund = "0"+sekund;
}
var temp = minut+":"+sekund;
document.getElementById("jsex6text").value = temp;
}
function jsex6_start() {
"use strict";
id = setInterval(jsex6_klocka,1000);
}
function jsex6_stopp() {
"use strict";
clearInterval(id);
}
function jsex6_nollning() {
"use strict";
antalSekunder=0;
document.getElementById("jsex6text").value = "0:00";
}
<script>Källor
Webbutveckling 1, Thelin Läromedel & Lars Gunther (2013)
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode(september 2014)