jQuery von Kopf bis Fuß (German Edition)
finden und diese dann in einer Schleife einzeln verarbeiten.
Kopf-Nuss
Wissen Sie, mit welchen Teilen des XML-Dokuments wir arbeiten müssen, um die einzelnen Läufer auf dem Bildschirm anzuzeigen?
jQuery-Codemagneten
Ordnen Sie die Codemagneten so an, dass eine Funktion namens
XML_laeufer_finden
entsteht, die die
ajax
-Methode aufruft und die Datei finisher.xml lädt. Nach dem erfolgreichen Laden sollen alle Listen geleert werden, die möglicherweise Informationen enthalten. Dann sollen alle Läufer in der XML-Datei gefunden und jeweils ermittelt werden, ob es sich um eine männliche (male) oder weibliche (female) Person handelt. Fügen Sie die Läufer der ihrem Geschlecht entsprechende Liste und außerdem der Liste
alle_finisher
für alle Finisher hinzu. Danach soll die Funktion
aktuelle_zeit
aufgerufen werden, um den Zeitpunkt der letzten Aktualisierung der Seite korrekt anzuzeigen.
jQuery-Codemagneten: Lösung
Verwenden Sie die Methoden
find
und
each
, um eine Schleife über die Datei finisher.xml auszuführen, das Geschlecht der Läufer zu überprüfen und sie den passenden Tabs unserer Webapplikation hinzuzufügen.
Anmerkung
In diesem Beispiel war die Zeile, die mit »var info = ...« beginnt, zu lang für die Seite. Wir haben sie daher auf der folgenden Zeile weitergeführt. Das müssen Sie in Ihrem Code nicht unbedingt machen.
Probefahrt
Ergänzen Sie Ihre meine_skripte.js -Datei um die
XML_lauefer_finden
-Funktion. Ersetzen Sie außerdem die
aktuelle_zeit
-Funktion (im
document.ready
-Teil) durch einen Aufruf der
XML_lauefer_finden
-Funktion. Die Funktion
aktuelle_zeit
wird nun innerhalb dieser neuen Funktion aufgerufen. Stellen Sie sicher, dass spätestens jetzt Ihr gesamter Code auf einem Webserver liegt und von dort abgerufen wird. Die URLs sollten also mit http:// und nicht mit file:// beginnen. Stellen Sie außerdem sicher, dass sich die XML-Datei auf demselben Server befindet wie die HTML-Datei. Ansonsten kann es schnell zu Problemen mit der »same origin«-Regel kommen.
Ja, das sollte sie.
Zum Glück wissen Sie bereits aus dem vorigen Kapitel, wie Sie Funktionen auf Ihrer Seite zeitgesteuert ausführen können. Lassen Sie uns noch einen kurzen Blick darauf werfen, wie das geht und welche Optionen wir dieses Mal haben ...
Funktionen zeitgesteuert aufrufen
Im letzten Kapitel haben wir die Timer-Methoden von JavaScript und jQuery kennengelernt, mit denen Sie Funktionen nach einem bestimmten Zeitplan ausführen können. Das
window
-Objekt von JavaScript besitzt vier Timer-Methoden:
setTimeout
,
clearTimeout
,
setInterval
und
clearInterval
. jQuery stellt außerdem die
delay
-Methode zur Verfügung. Sie ist allerdings für die Steuerung von Effekten gedacht und bietet keine Option für das wiederholte Ausführen von Funktionen oder den Aufruf nach einem bestimmten Zeitplan. Sie hilft uns hier also nicht weiter.
Nicht so schnell!
Wir können da nicht immer sicher sein. Wenn es um das Wiederholen von Funktionen auf der Seite geht, würde
setInterval
normal funktionierern. Wenn externe Ressourcen verwendet werden (wie unsere XML-Datei) kann es jedoch zu Problemen kommen.
Aufgepasst
setInterval
wird auch dann ausgeführt, wenn die aufgerufene Funktion noch nicht beendet ist.
Wenn Sie auf Informationen vom Server oder auf Benutzereingaben warten, kann es passieren, dass
setInterval
Ihre Funktion erneut aufruft, obwohl sie noch nicht bereit ist. Die Funktionen werden möglicherweise nicht in der Reihenfolge beendet, in der sie aufgerufen wurden.
Selbstreferenzierende Funktionen
Eine selbstreferenzierende Funktion ruft sich im Programmverlauf selbst auf. Diese Art von Funktion kann nützlich sein, wenn Sie darauf warten müssen, dass die Funktion die aktuelle Aufgabe beendet, bevor sie erneut ausgeführt werden kann. Wenn Sie dieses Verfahren mit einem Aufruf von
setTimeout
verbinden, können Sie eine Funktion in bestimmten Zeitabständen ausführen, falls der vorige Funktionsaufruf erfolgreich war. Ansonsten wird der Selbstaufruf in der Funktion nicht erreicht und es findet keine Wiederholung statt.
Spitzen Sie Ihren Bleistift
Schreiben Sie eine Funktion mit dem Namen
AJAX_aufrufe_starten
, die beim Laden der Seite aufgerufen wird und die Funktion
XML_lauefer_finden
alle zehn Sekunden erneut aufruft. Definieren Sie zu Beginn der Skriptdatei – aber innerhalb der Funktion
$(document).ready
– eine Variable mit dem Namen
FREQ
und weisen Sie ihr die Anzahl von Millisekunden zu, die als
Weitere Kostenlose Bücher