在对象内部使用FileReader

Question

I have an object which has a loadFile() method that parses a wav file. I have been using a FileReader outside the object and passing loadFile() the ArrayBuffer from the file read and letting it take over from there. I want to have potentially many of the objects, so I'd like to wrap up a FileReader inside the loadFile() method so I don't have to deal with all the reader code outside for every object. The problem is, I am not sure how this will work. Here's a code visual:

function MyObject() {
    this.property;
    this.anotherProp;
    this.data = new Array(); // array to be filled with PCM data for processing
}

// pass a File object
MyObject.prototype.loadFile = function(file) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function(event) {

        var buffer = event.target.result;

        // do lots of stuff with buffer and eventually fill up this.data[]

    }

}

MyObject.prototype.doProcessing = function() {

    // process this.data[]

}

var file; // a File object I grabbed from somewhere

var myObj = new MyObject();

myObj.loadFile(file);

myObj.doProcessing();

What will happen with loadFile() here? Will loadFile return before I have any data in myObj.data[] ? Or will it wait for reader.onload to fire before returning? If this is the wrong way to do this, how should I do it? Aslo, what if I wanted loadFile() to return false if something inside reader.onload fails?

Possible Solution: http://jsfiddle.net/N6vnU/2/

Current Solution: I ended up moving the file parsing function out of the object into a web worker, and discovering FileReaderSync . Now I send the file off to the web worker and create an object with the results once they return.

Answer 1

Events in Javascript are asynchronous, so you have to assume that loadFile will return before onload runs (always assume for the worst case, because you cannot predict when an async call will be completed).

Your usual option is adding a callback parameter to loadFile which you will call once onload is done, or optionally integrating deferreds/futures if that's how you prefer to work.

Also a hint: you need to call readAsArrayBuffer after you assign the onload handler, because again as it is async there's always the chance that you will miss this event if you first instruct the browser to read the file and then attach an event to it.

Answer 2

Yes, the loadfile will return before the file is actually loaded. A nice approach could involve the use of promises.

For example, you could use the Q library. Here's a link to the API: https://github.com/kriskowal/q/wiki/API-Reference

If you already use jQuery, the $.Deferred object could be enough, even though I suggest you to use the promises offered by the Q library.

The MyObject constructor could define a deferred (private would be ideal) to be resolved by the reader.onload function.

Knowing so little about the real use of the MyObject instances, consider read the following as pseudo-code.

function MyObject() {
    this.def = $.Deferred(); //the deferred to be resolved when the content has been loaded
    this.property;
    this.anotherProp;
    this.data = new Array(); // array to be filled with PCM data for processing
}

// pass a File object
MyObject.prototype.loadFile = function(file) {
    var obj = this,
        reader = new FileReader();
    this.def = $.Deferred();
    reader.readAsArrayBuffer(file);

    reader.onload = function(event) {
        var buffer = event.target.result;
        obj.def.resolve();
        // do lots of stuff with buffer and eventually fill up this.data[]
    }

}

MyObject.prototype.doProcessing = function() {
    this.def.done(function(){
        // process this.data[]
        console.log('resolved');
    });
}

var file; // a File object I grabbed from somewhere
var x = new MyObject();
x.loadFile(file);
x.doProcessing(); //this would print 'resolved' when the file is loaded