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

各功能後如何獲得5 lastim變量？預先感謝您的幫助！

Answer 1

問題是當你做圖像console.log(lastim);時沒有加載圖像。

使用一個deferred對象或回調。

回調的解決方案：

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

由於您使用的內部遞延你可以略過諾言並在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);