creating multiple response handler functions with a loop

[joe_doufu]

I'm creating a page with multiple "widgets", each with its own
XMLHttpRequest object, so the user can play with the widgets in
parallel. The widgets are enclosed in divs with class "widget" and a
unique ID which tells me the name of the PHP file for the widget.
Each widget should be able to access its PHP file with GET and POST
methods, and to re-draw its innerHTML on response.

I am using a simple Ajax library called XHConn (http://xkr.us/code/
javascript/XHConn/) by Brad Fults. Making the requests from within
each widget doesn't seem too hard, but the response handling is a
little difficult. Each response handler function should write output
to the correct widget. But if I create all these response handler
functions with a loop, they all use the latest "i" on execution. See:

widgetArray = getElementsByCl assName("widget ");
for (var i=0; i<widgetArray.l ength; i++) {
widgetConn[widgetArray[i].id] = new XHConn();
widgetReloaders[widgetArray[i].id] = function (oXML)
{ widgetArray[i].innerHTML=oXML .responseText };

As you see I dynamically create three arrays, one for the divs, one
for the XMLHttpRequest objects, and one for the response handlers.
The problem is the "widgetArra y[i]" in the response handler. I want
it to use the "i" at the time I created the function, not the "i" at
the time of execution (which is always one past the end of the
array). Can I do this? Is there a better way?

[Henry]

On Oct 9, 8:21 am, joe_doufu wrote:
<snip>

... . But if I create all these response handler
functions with a loop, they all use the latest "i" on execution.
See:

widgetArray = getElementsByCl assName("widget ");
for (var i=0; i<widgetArray.l ength; i++) {
widgetConn[widgetArray[i].id] = new XHConn();
widgetReloaders[widgetArray[i].id] = function (oXML)
{ widgetArray[i].innerHTML=oXML .responseText };

<snip>

So the problem is with your understanding of closures in javascript.
See:-

<URL: http://jibbering.com/faq/faq_notes/closures.html >

A closure in javascript is an association of a function object and the
objects on the scope chain at the point where the function object is
created (note that some web resources on javascript closures
erroneously suggest that the closure is formed between the function
object and the local variables). The objects on the scope chain are
mostly the Variable objects which have named properties that hold the
values of local variables. When you change a local variable, such as
your - i - you are changing the value of a property of a Variable
object, and as all your function objects form their individual
closures with the same variable object they all see the same changed
value.