drailing.net

Nachdem ich mich die letzte Woche mit jQuery etwas beschäftigt habe, möchte ich hier einmal kurz die aufgetretenen Probleme und die damit verbundenen Lösungen festhalten:

Parallele Abläufe
Da es in Javascript und somit auch in jQuery keine Threads gibt und eine endlose while Schleife keine Parallelität bietet (und ausserdem den Browser abstürzen lässt) muss ein anderes Konstrukt herhalten. Die Lösung hier lautet Rekursion (schön erklärt von Markus Kühle auf Javathreads).

setTimeout mit Parametern
Auf anhieb findet man für die Rekursion viele Beispiele mit der setTimeout Methode, leider aber immer ohne Parameterübergabe (in meinem Beispiel der CountUp):

setTimeout("countUp()", 1000);

Sobald nun countUp() mit einem Parameter übergeben werden soll, funktioniert dieser Aufruf nicht mehr. Die Lösung war, den ersten Parameter der setTimeout Methode durch eine Funktion zu ersetzen:

setTimeout(function(){
	countUp(date);
}, 1000);

Countup und die Zeit
Ich hatte eigentlich erwartet dass mich Google mit kleinen Codeschnipseln überhäuft wenn es um einen Simplen Countup für Zeit geht. Gefunden habe ich ein paar wenige, die aber so unschön anzuschauen waren, dass ich mir kurzerhand was kleines Simples selbst zusammengeschrieben habe:

//Parameter inzwischen global um einfach und dynamisch zur Laufzeit zu ändern
var year, month, day;
 
function countUp(){
        //month-1 da die Monate von 0-11 codiert sind
	var startDate = new Date(year, month-1, day, 0, 0, 0);
	var currentDate = new Date();
 
	var diff = new Date(currentDate.getTime() - startDate.getTime());
 
	//(diff.getYear()-70) da der Zeitliche Nullpunkt bei 1970 liegt, und wir nur die Anzahl der Jahre benötigen
	var diffString = "Years " + (diff.getYear()-70) + " Months " + diff.getMonth() + " Days " + diff.getDate() + 
		" Hours " + diff.getHours() + " Minutes " + diff.getMinutes() + " Seconds " + diff.getSeconds();
 
        //String schreiben
	$('#countUpDiv').html(diffString);
 
        //rekursiver Aufruf
	setTimeout(function(){
		countUp();
	}, 1000);
}

noch ein Tip zum Schluss
Um die komplette jQuery Doku auch offline (solls ja ab und zu geben…) nutzen zu können, gibts diese auch als PDF oder sogar als Windows Help File zum Download.
Link