Call a method once all deferred completes?

Question

I have this class:

(function(){
"use strict";

var FileRead = function() {
    this.init();
};


p.read = function(file) {

    var fileReader = new FileReader();
    var deferred = $.Deferred();

    fileReader.onload = function(event) {
        deferred.resolve(event.target.result);
    };

    fileReader.onerror = function() {
        deferred.reject(this);
    };

    fileReader.readAsDataURL(file);

    return deferred.promise();

};

lx.FileRead = FileRead;
}(window));

The class is called in a loop:

var self = this;
    $.each(files, function(index, file){
        self.fileRead.read(file).done(function(fileB64){self.fileShow(file, fileB64, fileTemplate);});

    });

My question is, is there a way to call a method once the loop has completed and self.fileRead has returned it's deferred for everything in the loop?

I want it to call the method even if one or more of the deferred fails.

Answer 1

$.when lets you wrap up multiple promises into one. Other promise libraries have something similar. Build up an array of promises returned by fileRead.read and then pass that array to $.when and hook up then/done/fail/always methods to the promise returned by .when

    // use map instead of each and put that inside a $.when call
    $.when.apply(null, $.map(files, function(index, file){
        // return the resulting promise
        return self.fileRead.read(file).done(function(fileB64){self.fileShow(file, fileB64, fileTemplate);});

    }).done(function() {  

      //now everything is done 
    })