SetInterval

Fra HTX Arduino
Spring til navigation Spring til søgning

Formålet med setInterval

Det man kan med setInterval er at man kan lægge en besked om at der skal foregå noget i programmet med et fast tids-interval.

Dette kan bruges til mange forskellige ting, Det kan være en side der skal opdateres løbende fra en server, hvor man foretager henvendelser i baggrunden ved hjælp af javaScript (det er AJAX-teknikken), men det kan også være til noget der gør et program på en hjemmeside mere dynamisk - hvis man bruger det smart kan man skabe bevægelser i siden.

Hvordan fungerer setInterval

setInterval 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 være et tidsinterval på 2 sekunder, så skal der stå 2000

Kald til setInterval

setInterval kaldes som følger:

setInterval("minFunktion();", 2000);

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

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

Eksempel på setInterval

Eksemplet her anvender setInterval til at flytte et billede ud af siden.

Opsætningen af setInterval() gøres præcist som illustreret:

setInterval("vis();", 10);

Funktionen vis() er så defineret som følger:

function vis() {
	x++;
	document.getElementById("billede").style.top = y + "px";
	document.getElementById("billede").style.left = x + "px";
}

Variablen "x" angiver x-koordinaten til billedet.

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

clearInterval

Når man kan sætte en event op til at komme med et fast interval, så kan det nogle gange være rigtigt smart, at man kan stoppe eventen igen, så der ikke kommer flere events. Dette kan gøres med clearInterval().

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 = setInterval("minFunktion();", 2000);

Eksempel med setInterval() og clearInterval()

Problematikken er udvidet noget i forhold til det foregående eksempel, men det den samme teknik der anvendes med at sætte x- og y-koordinaterne på et billede. Den store udvidelse er at der læses ting ind som brugeren kan ændre på, og at billedet forsøges holdt inden for visse rammer.

Som vist oven over husker vi timeren ved at placere den i en variabel - her "huskTimer1" - og vi har tiden liggende i en variabel interval.

var huskTimer1 = setInterval("flyt();", interval);

Dette ligger i en funktion der hedder startMove(), som kan ses i den kode der ligger i ZIP-filen

Funktionen startMove() er mere kompliceret, men det er blot for at beskytte koden mod at lave fejl, hvis brugeren betjener programmet ulogisk (forsøger at starte, mens den bevæger sig - det har to uheldige effekterhvis man gør det. Dels at man får startet flere intervaller, og dels at man kun kan stoppe det sidst startede interval, det er endnu værre, da man så ikke kan stoppe bevægelsen).

Som før har vi en funktion flyt() der håndterer det at flytte. Det ser lidt overvældende ud, men det er blot for at holde den inden for rammerne af en fornuftig visning.

function flyt() {
	// Alt efter hvilken vej der flyttes, så ændres x eller y med dx eller dy
	// Kommer x eller y ud over gænserne, så skiftes retning
	switch (retning) {
		case 0:
			x = x + dx;
			if (x > 800) {
				retning++;
			}
			break;
		case 1:
			y = y + dy;
			if (y > 600) {
				retning++;
			}
			break;
		case 2:
			x = x - dx;
			if (x < 50) {
				retning++;
			}
			break;
		case 3:
			y = y - dy;
			if (y < 20) {
				retning++;
			}
			break;
		default:
			retning = 0;
	}
	// Kald visningen
	vis();
}

Selve den aktuelle flytning af billedet i browseren sker i vis()

function vis() {
	// Placerer billedet der hvor x og y angiver det skal være
	document.getElementById("billede").style.top = y + "px";
	document.getElementById("billede").style.left = x + "px";
}

Det der håndterer at billedet kan stoppes igen er stopMove(), som sletter eventen ved hjælp af clearInterval() som vist her:

function stopMove() {
	clearInterval(huskTimer1);
}

Funktionen er mere kompliceret, men det er blot for at beskytte koden mod at lave fejl, hvis brugeren betjener programmet ulogisk (forsøger at stoppe, hvis den ikke bevæger sig).

De to funktioner startMove og stopMove aktiveres via to knapper.

Hele koden kan findes i setInterval2.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