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（）函数的im变量没有被传递。

在插件内部，我可以使用“ a”访问变量，例如在此行上

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

“ 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

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

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

Answer 2

如果我理解正确，则希望将迭代索引传递给.after（）。

在您的插件中，变量计数器用于跟踪您正在each（）迭代的哪个步骤。这是不必要的，因为每个变量的第一个参数是循环索引。 请参阅文档中的每个 。

同样，不需要函数is_last_done（），因为限制变量在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文章- 使用闭包中进行了描述 。