javascript - 使用 Web Worker 设置 Papa Parse 进度条

Question

我正在开发一个 CSV 解析 Web 应用程序，该应用程序收集数据，然后使用它来绘制图表。到目前为止，它运行良好，但不幸的是，使用 papaparse 解析 CSV 文件需要一些时间，即使它们只有大约 3MB。

所以，当“papa”工作时，能显示出某种进展就好了。我可以选择便宜的隐藏 div，显示“我正在工作”，但更喜欢使用 <progress> 。

不幸的是，酒吧在爸爸完成工作后才更新。所以我尝试进入网络工作人员并使用工作人员文件来计算进度并设置 worker: true在 Papa Parses 配置中。还是没有效果。

使用的配置(带步进功能)如下:

var papaConfig =
    {
        header: true,
        dynamicTyping: true,
        worker: true,
        step: function (row) {
            if (gotHeaders == false) {
                for (k in row.data[0]) {
                    if (k != "Time" && k != "Date" && k != " Time" && k != " ") {
                        header.push(k);
                        var obj = {};
                        obj.label = k;
                        obj.data = [];
                        flotData.push(obj);
                        gotHeaders = true;
                    }
                }
            }

            tempDate = row.data[0]["Date"];
            tempTime = row.data[0][" Time"];
            var tD = tempDate.split(".");
            var tT = tempTime.split(":");
            tT[0] = tT[0].replace(" ", "");
            dateTime = new Date(tD[2], tD[1] - 1, tD[0], tT[0], tT[1], tT[2]);

            var encoded = $.toJSON(row.data[0]);

            for (j = 0; j < header.length; j++) {
                var value = $.evalJSON(encoded)[header[j]]
                flotData[j].data.push([dateTime, value]);
            }

            w.postMessage({ state: row.meta.cursor, size: size });
        },
        complete: Done,
    }

主站点上的工作人员配置:

var w = new Worker("js/workers.js");

w.onmessage = function (event) {
   $("#progBar").val(event.data);
};

被调用的 worker 是:

onmessage = function(e) {
   var progress = e.data.state;
   var size = e.data.size;
   var newPercent = Math.round(progress / size * 100);

   postMessage(newPercent);
}

进度条会更新，但只有在解析 CSV 文件并设置数据后才会更新，因此调用了工作程序，但在解析后处理答案。帕帕·帕斯(Papa Parse)似乎也被称为 worker 。或者，如果检查浏览器调试工具中的调用，但网站仍然没有响应，直到所有数据显示出来。

任何人都可以指出我做错了什么，或者在哪里调整代码，以获得工作进度条？我想这也会加深我对网络 worker 的理解。

Answer 1

您可以使用FileReader API要将文件作为文本读取，请用“\n”分割字符串，然后计算返回数组的长度。这就是用于计算百分比的大小变量。

然后，您可以将文件字符串传递给Papa(您不需要直接从文件中重新读取)，并将行数(大小变量)传递给您的工作人员。 (我对 worker 不熟悉，所以不确定你是如何做到这一点的。)

显然，只有在 csv 文件内没有嵌入换行符的情况下(例如，字符串分布在带有换行符的多行中)，这才准确工作，因为这些行将计为额外行，因此您不会使其达到 100% 。这不是 fatal error ，但如果总是在 100% 之前完成，用户可能会觉得很奇怪。

这里有一些示例代码，可以为您提供一些想法。

var size = 0;

function loadFile(){
  var files = document.getElementById("file").files; //load file from file input
  var file = files[0];
  var reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event){
    var csv = event.target.result; //the string version of your csv.
    var csvArray = csv.split("\n");
    size = csvArray.length;
    console.log(size); //returns the number of rows in your file.
    Papa.parse(csv, papaConfig); //Send the csv string to Papa for parsing.
  };
}