javascript - jQuery - 从处理函数接收正确的变量值

Question

我正在编写 jQuery 插件并遇到一个小问题——无法从事件的处理函数中获取变量。看看我的例子来理解：

(function( $ ){

  var methods = {

  init : function( options ) {

   var settings = $.extend( {
    'images': [['1.jpg'],['2.jpg'],['3.jpg']]
    }, options);

    var lastim=2; //just for test

    $.each(settings.images,function(event) {

    console.log(lastim); //Getting 2, Ok!

    img=new Image();
    img.src=settings.thumbPath+'/'+this[0];

    $(img).load(function(event)
            {      
            lastim=5;
            });
    });

    console.log(lastim); //Getting 2, expecting 5

   }};

$.fn.testSlider = function( method ) {
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'No such method'+method );
    } 
};

})( jQuery );

如何在每个函数之后在 lastim 变量中获得 5？提前感谢您的帮助！

Answer 1

问题是您执行此操作时未加载图像console.log(lastim);。

使用延迟对象或回调。

回调解决方案：

var methods = {
       loadImage: function(img, cb){
            $(img).load(cb);
       }

//.... etc

像这样使用它：

methods.loadImage(img, function(){
    //image loaded
});

或者，如果您更喜欢延迟对象：

var dfd = $.Deferred(),
    promise = dfd.promise();

$(img).load(function(event){      
    dfd.resolve();
}).error(function(){
    dfd.reject();
});

promise.done(funciton(){
    //image loaded successfully
}).fail(function(){
    //image load error
});

由于您在内部使用 deferred，您可以跳过承诺并在dfd.

Answer 2

Jquery.load 是一个异步调用。无论 Jquery.load 是否完成执行，此函数之后的所有代码都将被执行

$(img).load(function(event)
            {      
            lastim=5;
//DO ALL YOU WANT TO DO WITH YOUR VARIABLE HERE
            });
    });

Answer 3

你的问题是：$(img).load(function(event)是异步的。退出函数时，尚未调用回调函数。

尝试：

(function( $ ){

  var methods = {

  init : function( options, callback ) { //Pass in a callback to receive value

   //Your code 

    $(img).load(function(event)
            {      
               lastim=5;
               if (typeof callback === "function"){
                     callback(lastim);
               }
            });
    });

   }};

var callback = function(lastim){
           //get callback value here
};

$.fn.testSlider = function( method ) {
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1            ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments.concat([callback]);
    } else {
      $.error( 'No such method'+method );
    } 
};

})( jQuery );