Javascript Array.map+；try/catch传递的引用分配延迟

我注意到，在[].map之后使用try/catch块进行引用确实会有延迟。我想知道为什么以及如何避免这种行为

我的测试用例是：

-file\u picked是类型为file的输入更改事件的处理程序

    file_picked: function(e){

        var flist = e.target.files, //all picked files
            parsed = [],        //all ok read
            errors = [];        //all errored

        //parse files
        _.map(flist, function(file){
            var reader = new FileReader();
            //set callbacks
            reader.onload = function(e){    //@reading done
                try{
                    var file_cont = e.target.result,
                        parser = new(less.Parser)({
                            filename: file.name
                        });
                    //run file through the less parser
                    parser.parse(file_cont, function (err, tree) {  //parser done
                        var o = {};
                        if (err) {  //@some parser error occured
                            err('less parser error',err);
                            o[file.name] =  err;
                            errors.push(o);
                        }else{  //@parsed successfully by the less parser
                            o[file.name] =  tree.toCSS();
                            parsed.push(o);
                        }
                    });
                }catch(e){
                    err('reader onload exception',arguments);
                    var o = {}; o[file.name] =  i18n('Parsing failed');
                    errors.push(o);
                }
            };
            reader.onerror = function(e){   //@reading error
                err('reader onerror',arguments);
                var o = {}; o[file.name] =  i18n('Reading failed with error: ')+e.target.error.code;
                errors.push(o);
            };
            //start reading
            reader.readAsText( file );
        });

        //reading completed
            console.log(parsed) 
            for( var i = 0; i < parsed.length; i++ ) {
            console.log(parsed[i],errors);
        }           
    }

文件拾取：函数（e）{
var flist=e.target.files，//所有拾取的文件
已解析=[]，//全部正常读取
错误=[]；//所有错误
//解析文件
_.map（flist，函数（文件）{
var reader=new FileReader（）；
//设置回调
reader.onload=函数（e）{/@reading done
试一试{
var file_cont=e.target.result，
parser=new（less.parser）({
文件名：file.name
});
//通过less解析器运行文件
parse（文件\u cont，函数（err，tree）{//parser done
var o={}；
如果（err）{/@发生了一些解析器错误
err（'less parser error'，err）；
o[file.name]=错误；
错误。推送（o）；
}else{/@已被less解析器成功解析
o[file.name]=tree.tocs（）；
push（o）；
}
});
}捕获（e）{
err（'reader onload exception'，参数）；
var o={}；o[file.name]=i18n（'解析失败'）；
错误。推送（o）；
}
};
reader.onerror=函数（e）{/@读取错误
err（'reader-onerror'，参数）；
var o={}；o[file.name]=i18n（'读取失败，错误：'）+e.target.error.code；
错误。推送（o）；
};
//开始阅读
reader.readAsText（文件）；
});
//阅读完毕
console.log（已解析）
for（var i=0；i

我在控制台中看到已解析的数组！ 但它从未被迭代过，为什么

提前谢谢

---

PS.：u.map是underline.js method，err，lg just console.xxx wrappers。

map函数是同步的，但在传递给

map

函数的回调函数中，您正在执行异步操作

reader.readAsText（文件）是异步的

这意味着
map
函数在将任何数据附加到
已解析的
数组之前返回。一个简单的修复方法是通过在
onload
和
onerror
回调中添加计数器来跟踪处理了多少文件。当已处理的文件数达到
flist.length
时，您将调用一个函数，该函数将使用
已解析的
执行此操作。您可以通过这种方式执行此操作，因此，在所有异步调用完成后，只会运行遍历已解析文件的函数：

_.wrap在函数被调用n次后立即运行该函数，在您的示例中为flist.length

[file_picked: function(e){

    var flist = e.target.files, //all picked files
        parsed = [],        //all ok read
        errors = [\],
        readParsed;        //all errored

    //parse files
    _.map(flist, function(file){
        var reader = new FileReader();
      //set callbacks
        reader.onload = function(e){    //@reading done
            try{
                var file_cont = e.target.result,
                    parser = new(less.Parser)({
                        filename: file.name
                    });
                //run file through the less parser
                parser.parse(file_cont, function (err, tree) {  //parser done
                    var o = {};
                    if (err) {  //@some parser error occured
                        err('less parser error',err);
                        [file.name] =  err;
                        errors.push(o);
                    }else{  //@parsed successfully by the less parser
                        [file.name] =  tree.toCSS();
                        parsed.push(o);
                    }

                    readParsed();
              });
            }catch(e){
                err('reader onload exception',arguments);
                var o = {}; [file.name] =  i18n('Parsing failed');
                errors.push(o);
                readParsed();
            }
        };

        reader.onerror = function(e){   //@reading error
            err('reader onerror',arguments);
            var o = {}; o\[file.name\] =  i18n('Reading failed with error: ')+e.target.error.code;
            errors.push(o);

            readParsed();
        };
        //start reading
        reader.readAsText( file );
    });

    readParsed = _.after(flist.length, function(){
        console.log(parsed);

        for( var i = 0; i < parsed.length; i++ ) {
            console.log(parsed[i],errors);
        }
    });
}][1]

[文件：函数（e）{
var flist=e.target.files，//所有拾取的文件
已解析=[]，//全部正常读取
错误=[\]，
readParsed；//所有错误
//解析文件
_.map（flist，函数（文件）{
var reader=new FileReader（）；
//设置回调
reader.onload=函数（e）{/@reading done
试一试{
var file_cont=e.target.result，
parser=new（less.parser）({
文件名：file.name
});
//通过less解析器运行文件
parse（文件\u cont，函数（err，tree）{//parser done
var o={}；
如果（err）{/@发生了一些解析器错误
err（'less parser error'，err）；
[file.name]=错误；
错误。推送（o）；
}else{/@已被less解析器成功解析
[file.name]=tree.toCSS（）；
push（o）；
}
readParsed（）；
});
}捕获（e）{
err（'reader onload exception'，参数）；
var o={}；[file.name]=i18n（'解析失败'）；
错误。推送（o）；
readParsed（）；
}
};
reader.onerror=函数（e）{/@读取错误
err（'reader-onerror'，参数）；
var o={}；o\[file.name\]=i18n（'读取失败，出现错误：'）+e.target.error.code；
错误。推送（o）；
readParsed（）；
};
//开始阅读
reader.readAsText（文件）；
});
readParsed=551;.after（flist.length，function（））{
console.log（已解析）；
for（var i=0；i
因为您在
map
回调中执行的操作是异步的，所以
map
调用在任何元素被追加到
解析的
数组之前完成。@plalx:我想是[].map块，但可以肯定的是，我也测试了本机for（），$.each，u.each（）它们不是异步的，但也不适用于它们..我发布了一个带有进一步解释的答案。哦，是的，我现在明白你的意思了！解析器部分也是如此……谢谢！将接受enr.code的答案，因为将使用uu.warp方法。@LiliputFX，如您所愿。