referencing function inside a for loop in js

Question

I have the following code:

function fn_get_natural_dim(){
    var width = this.width;
    var height = this.height;

    var ratiow = width/600;
    var ratioh = height/300;
    $("#output").append(img_name,",");

    if(ratiow>=ratioh)
        {
        height = height/ratiow;
        $(slide_image).css("width","600px");
        $(slide_image).css("height",height);
        var margin = (300-height)/2;
        $(slide_image).css("margin-top",margin);
        }
    else
        {
        width = width/ratioh;
        $(slide_image).css("width",width);
        $(slide_image).css("height","300px");
        var margin = (600-width)/2;
        $(slide_image).css("margin-left",margin);
        }
}
var max_count = $(".slider").children().length;
for(var count=1;count<=max_count;count++)
    {
    var count_string = count.toString();
    var img_name = "img" + count_string;
    var slide_image = document.getElementById(img_name);

    var img = new Image();
    img.onload = fn_get_natural_dim;
    img.src = $(slide_image).attr("src");
    }
});

For each image (i have three at the moment), im getting its natural dimensions so that i can calculate the margin necessary to fit a 600x300 div.

but i only works for the very last one, ie the third one. in other words, in the #output, it shows "img3,img3,img3," (called by $("#output").append(img_name,",");) how do i make it show "img1,img2,img3,"??

@Barmar it's not the exact same question - this code is (somewhat) fixed with the answer I gave to the previous question. Now the OP has a different problem. — Alnitak
– Alnitak, Commented Jul 24, 2013 at 12:08

Barmar · Accepted Answer · 2013-07-24 14:32:00Z

2

You can do this:

    img.onload = (function(img_name, slide_image) {
        return function() {fn_get_natural_dim(img_name, slide_image); };
    })(img_name, slide_image);

and change fn_get_natural_dim to take the image name as a parameter:

function fn_get_natural_dim(img_name, slide_image) {

The above code captures each successive value of img_name in a closure variable.

edited Jul 24, 2013 at 14:32

answered Jul 24, 2013 at 12:17

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

quasicoherent_drunk Over a year ago

by "change fn_get_natural_dim to take the image name as a parameter." do you mean make it to fn_get_natural_dim(img_name) ?

Barmar Over a year ago

Yes, that's exactly what I mean.

quasicoherent_drunk Over a year ago

hmm it doesn't seem to work. first of all, for some reason, the #output shows "#img1,#img3,#img2" and the margins for #img1 and #img2 are not changed, and #img3 becomes too big for some reason

Barmar Over a year ago

You're running this in the onload handler, and images won't necessarily finish loading in the same order that you started them. They'll be displayed in whatever order they loaded.

quasicoherent_drunk Over a year ago

i see. well, i guess that's not too big of a problem. but the margins do not seem to work properly

|

André Dion · Accepted Answer · 2013-07-24 12:24:13Z

-1

Edit

As Barmar pointed out, this solution isn't exactly correct. I'll leave it up as it's a fairly common mistake and is important to note the difference between his solution and my own.

Pass img_name into your fn_get_natural_dim function:

function fn_get_natural_dim( img_name ) { ... }

Then call it like:

img.onload = function() { fn_get_natural_dim(img_name); };

edited Jul 24, 2013 at 12:24

answered Jul 24, 2013 at 12:04

André Dion

21.8k7 gold badges59 silver badges60 bronze badges

5 Comments

Barmar Over a year ago

That won't work because img_name isn't a closure variable. You need a wrapper function to close it.

zkar Over a year ago

@Barmar: Why not? The function has access to img_name from my point of view, since it is defined inside the loop.

Barmar Over a year ago

But the loop is not a variable scope in JS. So each iteration references the same img_name variable.

zkar Over a year ago

Then you can create a new scope to bind the value, if needed with a new function.

André Dion Over a year ago

@zkar Barmar is correct. See stackoverflow.com/questions/643542/…

Collectives™ on Stack Overflow

referencing function inside a for loop in js

2 Answers 2

8 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related