SetTimeout

Formålet med setTimeout

Det man kan med setTimeout er at man kan lægge en besked om at der skal foregå noget i programmet efter en vis tid.

Dette kan bruges til mange forskellige ting, men typisk til noget der gør et program på en hjemmeside mere dynamisk - hvis man bruger det udstrakt kan man faktisk skabe bevægelser i i siden - til dette formål er setInterval dog mere anvendelig.

Hvordan fungerer setTimeout

setTimeout kan kaldes hvor som helst fra i koden, og skal have 2 parametre:

1. En tekst-streg med navnet på den funktion der skal kaldes (eller basalt set den kode der skal afvikles).
2. En tid angivet i millisekunder, så hvis funktionen skal kaldes efter 2 sekunder, så skal der stå 2000

Kald til setTimeout

setTimeout kaldes som følger:

setTimeout("minFunktion();", 2000);

Man skal så selvfølgelig have defineret funktionen minFunktion() som f.x.

function minFunktion() {
    document.getElementById("besked").innerHTML = "Der er gået 2 sekunder";
}

Eksempel på setTimeout

Eksemplet her anvender setTimeout til at gøre brugeren opmærksom på at der skal indtastes noget på siden.

Opsætningen af setTimeout gøres præcist som illustreret:

setTimeout("advarsel();", 5000);

Funktionen advarsel er så defineret som følger:

function advarsel () {
	if (advaret) return;	// Hvis man ikke skal advares, så returneres uden at man gør noget
	alert("Du skal indtaste noget på siden");
	document.getElementById("testFelt").focus();
}

Variablen "advaret" bliver håndteret af en funktion der angiver at man er blevet advaret, hvis man taster noget i feltet.

Hele koden kan findes i setTimeout.html i denne ZIP-fil

clearTimeout

Når man kan sætte en event op til at ske efter et stykke tid, så kan det nogle gange være smart, at man kan stoppe eventen inden den er sket. Dette kan gøres med clearTimeout().

Det kræver blot at man har styr på sin event, og det gør man ved at oprette en variabel med en henvisning til event-handleren, f.x. som følgende:

var minTimer = setTimeout("minFunktion();", 2000);

Eksempel med setTimeout() og clearTimeout()

Problematikken er den samme som i det foregående eksempel, men det løses bare på en anden måde.

Som vist oven over husker vi timeren ved at placere den i en variabel - her "huskTimer1".

var huskTimer1 = setTimeout("advarsel();", 5000);

Som før har vi en funktionder håndterer advarslen, men den tjekker ikke på om man er blevet advaret - det er ikke nødvendigt med denne programkonstruktion

function advarsel () {
	alert("Du skal indtaste noget på siden");
	document.getElementById("testFelt").focus();
}

Det der håndterer at advarsel() funktionen ikke kaldes er en funktion keyTest(), som sletter eventen ved hjælp af clearTimeout() som vist her:

function keyTest () {
	clearTimeout(huskTimer1);	// Indiker at der ikke skal advares, hvis man har tastet noget
}

Funktionen aktiveres så fra det inputfelt vi gerne vil gøre opmærksom på, ved at sætte en eventhandler på onKeyPress til at kalde funktionen keyTest():

<input type="text" id="testFelt" onKeyPress="keyTest();" />

Hele koden kan findes i setTimeout2.html i denne ZIP-fil

Webcode
JavaScript	for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input	Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output	Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks	Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt	Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript	Date objektet - setTimeout - setInterval
PHP	Header - Include