在js中的for循环内引用函数

Question

我有以下代码：

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");
    }
});

对于每张图片（我目前有三张），我会得到它的自然尺寸，这样我就可以计算出适合 600x300 div 所需的边距。

但我只适用于最后一个，即第三个。 换句话说，在#output 中，它显示“img3,img3,img3”（由 $("#output").append(img_name,","); 调用） 如何让它显示“img1,img2,img3”？？

Answer 1

你可以这样做：

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

并更改fn_get_natural_dim 以将图像名称作为参数：

function fn_get_natural_dim(img_name, slide_image) {

以上代码在闭包变量中捕获img_name 的每个连续值。

Answer 2

编辑

正如 Barmar 指出的那样，这个解决方案并不完全正确。我会留下它，因为这是一个相当常见的错误，重要的是要注意他的解决方案和我自己的解决方案之间的区别。

---

将img_name 传递到您的fn_get_natural_dim 函数中：

function fn_get_natural_dim( img_name ) { ... }

然后这样称呼它：

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