jquery 将变量传递给函数

Question

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

(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 没有通过，有什么想法吗？

谢谢

Answer 1

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

在您的插件中，变量 counter 用于跟踪您所处的each() 迭代的哪一步。这是不必要的，因为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 文章中进行了描述 - 使用闭包。

Answer 2

该变量可以在嵌套函数上访问，因为它位于外部 闭包 上，您不需要参数，你可以简单地使用它：

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