В JQuery: Как стрелять пользовательский отложенное событие

Question

У меня есть плагин, как это:

(function($){ 
    $.fn.extend({ 
    myplugin: function() { 
     var jobs = []; 
     this.each(function(){ 
     jobs.push($(this).one(
      'load', 
      function(){ 
      // Line A: "Load" fires here 
      // Replace image source 
      $(this).attr('src','new_url'); 
      // Line B: Everything is done, fire now! 
      })); 
     }); 
     // Callback 
     $.when.apply(null,jobs).then(function(){ 
      alert($(this).attr('src')); 
     }); 
     return this; 
     } 
    }); 
    })(jQuery); 

Помощник when всегда предупреждает старый источник изображения. Потому что он вызывается после load по адресу Линия A. Но мне нужно запустить его на Линия B.

Как это решить? Есть идеи?

Спасибо!

Answer 1

Вы не передаёте какую-либо отложенную заявку до when. Все, что вы передаете, это массив объектов jQuery.

Создать новую deferred для каждого элемента в коллекции, а затем resolve его прослушивателя событий:

(function($){ 
    $.fn.myplugin = function() { 
     var deferreds = []; 

     this.each(function() { 
      var deferred = $.Deferred(); 

      deferreds.push(deferred); 

      $(this).one('load', function() { 
       this.src = 'new_url'; 
       deferred.resolve(); 
      }); 
     }); 

     $.when.apply($, deferreds).then(function() { 
      alert('All sources have been changed.'); 
     }); 

     return this; 
    }; 
})(jQuery); 

---

Чтобы быть более кратким, вы можете передать функцию отложенного конструктора вместо:

this.each(function (i, element) { 
    deferreds.push($.Deferred(function (deferred) { 

     $(element).one('load', function() { 
      this.src = 'new_url'; 
      deferred.resolve(); 
     }); 

    })); 
});