Is there a way to make multiple html5 filereader.onload events fire sequentially?
<p>I am using the html5 filereader API to get photos locally without the user having to upload them.</p>

<p>In browsers that support it I am allowing multiple selections so I am looping through the selected files and performing a function on each one (TC.editor.renderSlide()) as shown below:</p>

<pre><code> handlePhotoUploads: function(event) {
    var self = this;
    TC.dialog.destroy();
    var files = event.target.files;
    var count = files.length + TC.editor.cache.slides.length;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();
        var index = TC.editor.getNewSlidesIndex();
        TC.editor.addNewSlide('photo', index);
        reader.onload = (function(theFile) {
            var slideindex = index;
            return function(e) {
                TC.editor.renderSlide(slideindex, e.target.result, 'internal', count);
            };
        })(f);
        reader.readAsDataURL(f);
    }
},
</code></pre>

<p>The problem is that the TC.editor.renderSlide() function can take a significant amount of time to perform (performs canvas and DOM manipulations) so when dealing with 8 or so large image files the browser gets locked for a substantial amount of time.  Even the 'processing gif's stop animating during this period.</p>

<p>Is there any way to ensure that each reader.onload event fires only after the previous one has completed? This way the user would be given regular progress updates by seeing the result of each call to TC.editor.renderSlide() individually rather than the current situation which locks the browser while everything is being processed?</p>

<p>I have tried adding a simple setTimeout to renderSlide() to no avail?</p>

<p>Any help or ideas would be greatly appreciated.</p>
