[JavaScript] Übergabe eines HTML-Elements als Argument

[glowhand]

Hallo!
Mein Problem ist zwar bereits gelöst, mich interessiert aber doch, warum es übrhaupt auftrat. Ich habe folgenden Code, der NICHT funktioniert:

function fadeIn(element)
{
  var oldOpacity = element.style.opacity*1;
  if (oldOpacity != 1)
  {
    var newOpacity = (element.style.opacity*1)+0.05;
    element.style.opacity = newOpacity;
    window.setTimeout("fadeIn(element)",25);
  }
}

Die Funktion soll sich rekursiv immer wieder aufrufen, um die Transparenz des Element zu verringern.

Die Fehlermeldung im Firefox (im Opera geht aber auch nicht):

element is not defined
[Break on this error] window.setTimeout("fadeIn(element)",25);

Aha, Element also nicht definiert.
Wenn ich aber eine Zeile vorher nochmal ein
el = element setze und die fadeIn-Funktion dann mit el aufrufe klappts:

// einblenden
function fadeIn(element)
{
  var oldOpacity = element.style.opacity*1;
  if (oldOpacity != 1)
  {
    var newOpacity = (element.style.opacity*1)+0.05;
    element.style.opacity = newOpacity;
    el = element;
    window.setTimeout("fadeIn(el)",25);
  }
}

Warum?

 

[Moloc]

Wenn du dir den setTimeout genauer anschaust, siehst du, dass die Funktion fadeIn und der Parameter element als String übergeben werden. D.h. die Funktion setTimeout führt dieses nach den 25 millisekunden aus. Die Funktion setTimeout wandelt dann den String um. fadeIn ist global definiert, und kann somit gefunden werden. "element" als Parameter ist jedoch nicht global definiert, und wird somit in der setTimeout-Funktion nicht erkannt --> Fehler.

Beim zweiten Beispiel speicherst du ja mit "el = element" die Referenz ab. Da du nirgends ein "var el" für die Deklaration geschrieben hast, wird in JavaScript die Variable el als globale Variable angelegt. Damit kann dann die setTimeout-Funktion die variable el finden und die Funktion fadeIn richtig ausführen.

 

[tleilax]

Vielleicht wär's sogar einfacher, die Funktion für den Timeout als wirkliche Funktion und nicht als String zu übergeben. Da Javascript innerhalb von Funktionen eigentlich immer den Kontext erhält, müsste somit die Variable element auch beim nächsten Aufruf vorhanden sein, was bei der Stringvariante unter Umständen nicht gegeben ist.

 

[glowhand]

Danke @ Moloc. Wusste bisher nicht, was das var eigentlich bezweckt und dass die übergebenen Wert für die setTimeout-Funktion global sein müssen.

@teilax: Wie meinst du das? ein window.setTimeout(fadeIn(element),1000) funktioniert nicht.

 

[tleilax]

Nee, so kann man das auch machen:

window.setTimeout(function() {
  fadeIn(element);
}, 1000);

 

[glowhand]

jup danke, funtioniert auch.
aber wo is der unterschied. ob ich nun eine neue funktion definiere oder eine vorhandene funktion eintrage dürfte doch eigentlich keinen unterschied machen?
vielleicht bin auch einfach noch viel zu wenig mit javascript vertraut, um irgendeine logik darin zu sehen.

 

[ZeroCCC]

jup danke, funtioniert auch.
aber wo is der unterschied. ob ich nun eine neue funktion definiere oder eine vorhandene funktion eintrage dürfte doch eigentlich keinen unterschied machen?
vielleicht bin auch einfach noch viel zu wenig mit javascript vertraut, um irgendeine logik darin zu sehen.

Wenn du "fadeIn()" schrebist ist das für JS ein Funktionsaufruf, also ruft JS die Funktion sofort auf und der Rückgabewert wird an setTimeout übergeben. Du müsstest an der stelle also nur ein Zeiger auf die Funktion nutzen... und der wäre "fadeIn" (ohne "), das geht aber nicht weil du so keine Parameter übergeben kannst. Also erstellst du eine neue Funktion... und als Rückgabewert erhällst du einen Zeiger auf die Funktion. Man könnte zb auch schreiben...

var meineFunktion = function() {
   //
}

meineFunktion();