我正在使用 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() 的结果来定期更新进度,而不是在处理所有内容时锁定浏览器的当前情况?
我尝试向 renderSlide() 添加一个简单的 setTimeout 无济于事?
任何帮助或想法将不胜感激。