Javascript: Wie übergebe ich ein anderes Objekt an SetTimeout-Handler, die in einer Schleife erstellt wurden?
Ich versuche, einige JS-Replikationen der Funktionen fadeIn und fadeOut von jQuery zu schreiben. Hier ist der Code, den ich bisher habe:
function fadeIn(elem, d, callback)
{
var duration = d || 1000;
var steps = Math.floor(duration / 50);
setOpacity(elem,0);
elem.style.display = '';
for (var i = 1; i <= steps; i++)
{
console.log(i/steps + ', ' + (i/steps) * duration);
setTimeout('setOpacity("elem", '+(i / steps)+' )', (i/steps) * duration);
}
if (callback)
setTimeout(callback,d);
}
function setOpacity(elem, level)
{
console.log(elem);
return;
elem.style.opacity = level;
elem.style.MozOpacity = level;
elem.style.KhtmlOpacity = level;
elem.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
Ich habe Probleme mit dem ersten setTimeout-Aufruf. Ich muss das Objekt 'elem' (ein DOM-Element) an die Funktion setOpacity übergeben. Das Übergeben der 'Level'-Variable funktioniert einwandfrei ... es wird jedoch der Fehler "elem ist nicht definiert" ausgegeben. Ich denke, das liegt daran, dass zu dem Zeitpunkt, an dem einer der setOpacity-Aufrufe tatsächlich ausgeführt wird, die anfängliche FadeIn-Funktion beendet ist und die Variable elem nicht mehr existiert.
Um dies zu mildern, habe ich einen anderen Ansatz gewählt:
setTimeout(function() { setOpacity(elem, (i / steps));}, (i/steps) * duration);
Das Problem ist jetzt, dass beim Aufrufen der Funktion (i / steps) immer 1.05 ist, anstatt von 0 auf 1 zu erhöhen.
Wie kann ich das betreffende Objekt an setOpacity übergeben, während ich die Deckkraftstufe richtig erhöhe?