XHR und mehrere Progressbars

[Rolf b]

Ich mache mal ein einfaches Beispiel für Closures: Wenn Du irgendwo schreibst:

function test(a)
   var f = function(x) { return a+x; }
   return f;
}
var f1=test(1), f2=test(2), f3=test(4);

dann steht in f1, f2 und f3 jedesmal eine Funktion, die sich als function(x) { return a+x; } präsentiert, also gleich aussieht. Was man nicht sieht, ist der Laufzeitkontext. Der wird in dem Moment an die Funktion gehängt, wo function... an irgendetwas zugewiesen wird. Dieser Kontext enthält die Variablen a und f, und a hat jedesmal einen anderen Wert. Deswegen addiert f1 eine 1, f2 eine 2 und f3 eine 4.

Übertragen auf dein Szenario heißt das: Eigentlich musst Du gar nichts durchreichen, damit es funktioniert. Die ID ist Teil des Aufrufkontextes, der an deine Eventhandler gebunden ist, und darum in jeder Handlerinstanz unterschiedlich. Ganz genau formuliert hängen an deinen Eventhandlern sogar drei Aufrufkontexte: der des canvas.toBlob-Handlers, der des img.onload Handlers und der von update(). Die ID ist ein Parameter für update und darum Teil des Laufzeitkontextes der update() Funktion.

Was Probleme bereiten könnte, ist dein erzwungenes Zuweisen der e.target.id (sprich: der img.id) an die diversen id Attribute anderer Elemente. Die ID muss im DOM eindeutig sein und das könnte deshalb zur Verwirrung des Browsers führen. Arbeite nur mit der id Variablen, das müsste passen.

Rolf