jquery将变量传递给函数答案

【问题标题】：jquery passing a variable to a functionjquery将变量传递给函数
【发布时间】：2011-01-18 08:48:21
【问题描述】：

大家好，我正在做一个简单的预加载函数

(function($) {
    $.fn.preload = function(settings) {

    var config = {
        before: function(){ return; },
        end: function(){ return; },
        after: function(a){ return; }
    };

    if (settings) $.extend(config, settings);

    var limit = this.length - 1;
    var counter = 0;

    settings.before();

    is_last_done = function(i){if (i == limit) return true;};

    this.each(function(i, src){
        $("<img>").attr("src", src).load(function(){

            if( a == counter ) settings.after();
            if(is_last_done(i)) settings.end(); // Last is done
            counter++;

        });
    });
    return this;
};
})(jQuery);

并调用它

    img = ['a.jpg', 'b.jpg', 'b.jpg'];

    a = 1;

    $(img).preload({
        before: function(){ return; },
        end: function(){  },
        after: function(a){
            console.log('first done');
        }
    });

问题在于传递给“after()”函数的“a”变量没有被传递。

在插件内部，我可以使用 'a' 访问变量，就像在这一行中一样

if( a == counter ) settings.after();

'a' 是可用的，但是如果我想将 a 变量命名为别的东西怎么办？如何访问 after() 函数的参数？

如果我使用此代码，我的代码将不再工作

img = ['a.jpg', 'b.jpg', 'b.jpg'];

b = 1;

$(img).preload({
    before: function(){ return; },
    end: function(){  },
    after: function(b){
        console.log('first done');
    }
});

b 没有通过，有什么想法吗？

谢谢

【问题讨论】：

标签： javascript jquery closures scope

【解决方案1】：

如果我理解正确，您想将迭代索引传递给 .after()。

在您的插件中，变量 counter 用于跟踪您所处的 each() 迭代的哪一步。这是不必要的，因为每个参数的第一个参数是循环索引。请参阅文档中的each。

另外，函数 is_last_done() 也不需要，因为 limit 变量在 each() 调用的匿名函数的作用域内。

var limit = this.length - 1;

settings.before();

this.each(function(i, src){
    $("<img>").attr("src", src).load(function(){

        if (i == a) settings.after(i);
        if (i == limit) settings.end();

    });
});

Javascript 是词法范围的，因此您无需为函数执行任何操作即可查看在封闭范围中声明的变量。这被恰当地称为闭包，并在这篇 Mozilla 文章 - Working with Closures 中进行了描述。

【讨论】：

我想要的是能够将一个 int 传递给 after() 函数并在我的插件中调用它，不管它叫什么。

【解决方案2】：

变量可以在嵌套函数中访问，因为它存在于外部closure，你不需要参数，你可以简单地使用它：

var img = ['a.jpg', 'b.jpg', 'b.jpg'];
var b = 1;

$(img).preload({
    before: function(){ return; },
    end: function(){  },
    after: function(){
        // b is accessible here.
        console.log(b);
    }
});

【讨论】：

我想要的是能够将一个 int 传递给 after() 函数并在我的插件中调用它，不管它叫什么。