Fadeout script mit set_timeout

[molily]

Hallo,

function fadeout(id) {
window.setTimeout("document.getElementById(id).style.backgroundColor='#FFFFFF'", 10);

onMouseOut="fadeout('01');"

Die Variable id ist eine lokale in der Funktion fadeout und steht dem verzögert aufgerufenen Code nicht zur Verfügung.

Du könntest sie zu einer globalen Variable machen, aber genauso gut könntest du mit Closures arbeiten, um die Informationen aus der Fadeout-Funktion an den Code weiterzugeben, der verzögert aufgerufen werden soll.

Beispiel:

function fadeout (param) {  
 // Beim ersten Aufruf ist der Parameter ein String  
 if (typeof param == "string") {  
  // Lege ein Object an mit dem aktuellen Schritt und einer Referenz auf das Element  
  var obj = {  
   "schritt" : 0,  
   "elem" : document.getElementById(param)  
  };  
 } else {  
  // Bei den Folgeaufrufen ist der erste Parameter bereits das Object  
  obj = param;  
 }  
 // Ändere Hintergrundfarbe  
 obj.elem.style.backgroundColor = fadeout.schritte[obj.schritt];  
 // Erhöhe den Schrittzähler  
 obj.schritt++;  
 var closure = function () {  
  // Die Closure schließt obj ein  
  fadeout(obj);  
 };  
 if (obj.schritt < fadeout.schritte.length) {  
  // Rufe fadeout erneut verzögert auf, gekapselt in eine Closure  
  obj.elem.timeout = window.setTimeout(closure, 200);  
 }  
}  
fadeout.schritte = ["#FFFFFF", "#D694CC", "#BB4CAA", "#AA1F95"];

<p onmouseover="this.style.backgroundColor = 'white';" onmouseout="fadeout('a1');" id="a1">test</p>

Es gibt hier nur eine Funktion, die sich immer wieder selbst verzögert aufruft (wie Martin auch geraten hat). Sie ruft sich so oft auf, wie Einträge im Array schritte sind, der die Farbcodes enthält.

Am Anfang übergibt man der Funktion eine ID, sie legt dann ein Object an, in dem der aktuelle Schritt und eine Referenz auf das Element gespeichert werden. Dieses Object ist nicht unbedingt nötig, man könnte es auch ohne lösen, aber es bietet die Möglichkeit, alle relevanten Daten zum laufenden Fadeout in einem Objekt zu speichern.

Es wird eine Closure (verschachtelte Funktion) angelegt, in dessen Funktionskörper man Zugriff auf dieses Object hat. Darin wird fadeout mit dem Object aufgerufen, das die Infos zum gegenwärtig laufenden Fadeout enthält. Dieses Funktionsobjekt wird dann setTimeout übergeben.

Auf diese Weise wird fadeout immer wieder aufgerufen und bekommt ein Object mit dem gegenwärtigen Status des Fadeouts als Parameter.

(Sieht vielleicht auf den ersten Blick tausendmal komplizierter aus, aber das sehe ich als fortgeschrittenen Programmierstil, an den man sich ohnehin herantasten sollte.)

Mathias