如何检测FileReader加载结束？

Question

我有下面这个型号，带有文件读取功能。但是，读取是在下一段代码之后完成的。为什么以及如何将其获取到 return 文件的读取内容？

   TreeContainer = Backbone.Model.extend({
                elementCount: 0,
                file: '',
                object: {jj: "kk"},
                type: "input",
                parent: d3.select("#canvas"),
                initialize: function () {
                    var result = this.readFile();
                    for (var i = 0; i < 200; i++) {
                        console.log(i); //this is resulted before the readFile content
                    }

                },
                readFile: function () {
                    var model = this;
                    // display text
                    if (this.get('file').name.endsWith(".json") || this.get('file').type === "application/json") {

                        var reader = new FileReader();

                        reader.onload = function (e) {
                            //parseJSON
                            var text = e.target.result;
                            var data = JSON.parse(text);
                            model.set('object', data);
                            console.log(data);
                            return data;
                        };
                        reader.readAsText(this.get('file'));
                    }
                }
            });

Answer 1

你爱上了async for loop problem

只有看完所有内容后才能循环遍历所有文件这是一个使用 Screw-FileReader

的例子

initialize: function(){
    this.readFile().then(arr => {
        for (let json of arr) {
            console.log(json) //this is resulted before the readFile content
        }
    })
},
readFile: function() {
    function isJSON(file) { 
        return file.name.toLowerCase().endsWith('.json') ||
        file.type === 'application/json'
    }

    return Promise.all(
        Array.from(input.files)
        .filter(isJSON)
        .map(file => file.json())
    )
}

备选方案是将 FileReader 包装在 Promise 中

return new Promise(resolve => {
    reader.onload = function (e) {
        var text = e.target.result
        var data = JSON.parse(text)
        model.set('object', data)
        resolve(data)
    }
})

或回传

initialize: function(){
    this.readFile(json => {
        json
    })
},
readFile: function(resolve) {
    resolve(data)
}

如何检测FileReader加载结束？

How to detect FileReader load end?

javascript

backbone.js