Array.map+try/catch传递了引用赋值延迟

Array.map+try/catch passed reference assignment delay

本文关键字：引用 赋值 延迟 map+try catch Array      更新时间：2023-09-26

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

我的测试用例是：

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

我在控制台中看到了解析后的数组！但它从来没有迭代过，为什么？

提前感谢

PS.：_。map是undercore.js方法，呃，lg只是console.xxx包装器。

您可以用这种方式来完成，这样迭代解析文件的函数只会在所有异步调用完成后运行：

_.wrapp在函数被调用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]

map函数是同步的，但在传递给map函数的回调函数内部，您正在执行异步操作。

reader.readAsText( file );是异步的。

这意味着map函数在任何数据被附加到parsed数组之前返回。一个简单的修复方法是通过在onload和onerror回调中添加计数器来跟踪处理了多少文件。当已处理的文件数达到flist.length时，您将调用一个函数来处理parsed。

相关文章：