html onload方法,有没有办法让多个html5 filereader.onload事件依次触发？

我使用html5 filereader API在本地获取照片，而无需用户上传照片。

在支持它的浏览器中，我允许多个选择，因此我循环选定的文件并在每个文件上执行一个函数(TC.editor.renderSlide())，如下所示：

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);

}

},问题在于，TC.editor.renderSlide()函数可能需要大量时间来执行(执行画布和DOM操作)，所以当处理8个左右的大图像文件时，浏览器会被锁定很长时间。即使是'处理gif'也会在这段时间内停止动画。

有什么方法可以确保每个reader.onload事件只有在前一个完成后才会触发？通过这种方式，用户可以单独查看每个对TC.editor.renderSlide()的调用结果，而不是锁定浏览器而处理所有内容的当前情况，从而定期获得进度更新？

我曾尝试添加一个简单的setTimeout renderSlide()无济于事？

任何帮助或想法将不胜感激。