function in for loops

[Andrew Poulos]

I realise that this probably gets answered before but, alas, google has
let me down.

var myimg, len = 10; // say

for (var i = 0; i < len; i++) {
myimg = ... // code that dynamically adds an image
myimg.onload = function() {
// do stuff here
};
}

Of course 'do stuff here' only occurs on the last iteration. How do I
get the onload triggering for every image created by the loop?

Andrew Poulos

 

[Kiran Makam]

Of course 'do stuff here' only occurs on the last iteration.

This is happening because of the closure. When the iteration ends
myimg will be pointing to the last image and hence 'do stuff here'
only occurs on the last image.

Move the code inside 'for' loop to another function, so that a closure
is created for each image instance.
-----------------
var myimg, len = 10; // say

for (var i = 0; i < len; i++) {
myimg = addImg(i);
document.body.appendChild(myimg);
}

function addImg(i){
var img = new Image();
img.src = "provide image url";
img.onload = function() {
alert(i);
// do stuff here
};
return img;
}

 

[Lasse Reichstein Nielsen]

I realise that this probably gets answered before but, alas, google
has let me down.

var myimg, len = 10; // say

for (var i = 0; i < len; i++) {
myimg = ... // code that dynamically adds an image
myimg.onload = function() {
// do stuff here
};
}

Of course 'do stuff here' only occurs on the last iteration.

What do you mean by "on the last iteration". All the functions
will be called after the loop has stopped executing (Javascript
isn't multithreaded).
Or do you mean that only one function is called? They should
all be called, but if the function depends on "i", it will have
the value "len" for all the functions when they are called.

How do I get the onload triggering for every image created by the
loop?

You are doing that right. You assign a function to each image, and
they should be executed eventually (if the images load correctly).

 

[Andrew Poulos]

What do you mean by "on the last iteration". All the functions
will be called after the loop has stopped executing (Javascript
isn't multithreaded).
Or do you mean that only one function is called? They should
all be called, but if the function depends on "i", it will have
the value "len" for all the functions when they are called.

If 'do stuff here' is alert(myimg.src) then I get the same file name
10 times.

You are doing that right. You assign a function to each image, and
they should be executed eventually (if the images load correctly).

Ok, I understand what you're saying. In an effort to be brief I've been
imprecise/wrong. 'do stuff here' includes references to 'i' and so I'm
getting the same 'i' value applied for all iterations.

Andrew Poulos

 

[Lasse Reichstein Nielsen]

Ok, I understand what you're saying. In an effort to be brief I've
been imprecise/wrong. 'do stuff here' includes references to 'i' and
so I'm getting the same 'i' value applied for all iterations.

That was what I was expecting.
You only have one "i" variable, and after the loop it has the value
"len". Then all the onload events trigger and call the function, and
it does its job with that value of "i" for all the images.

To make each onload event do something different, you need to have
one "i" variable for each image, i.e., you need to create the "i"
variable in the loop.
Do, e.g.,:

for (...) {
...
myimg.onload = (function(i) {
return function () {
// do stuff here
};
})(i);
...
}

This creates a new function and calls it immediately, thereby creating
a new scope level with a new variable (still called "i", but you could,
and should, rename it to something meaningfull) with the current value
of "i" in it.

/L