1

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を取得する方法は? 助けてくれてありがとう！

4

3 に答える 3

2

問題は、実行時に画像が読み込まれないことです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 を使用しているため、promise をスキップして で同じメソッドを使用できますdfd。

于 2013-10-24T13:07:28.960 に答える
1

Jquery.load は非同期呼び出しです。Jquery.load の実行が終了したかどうかに関係なく、この関数の後のすべてのコードが実行されます。

$(img).load(function(event)
            {      
            lastim=5;
//DO ALL YOU WANT TO DO WITH YOUR VARIABLE HERE
            });
    });
于 2013-10-24T13:09:02.967 に答える