javascript - 与Web worker 一起设置Papa Parse进度栏

我正在使用CSV解析Web应用程序，该应用程序会收集数据，然后使用它绘制绘图图。到目前为止，它运行良好，但不幸的是，即使只有3MB的空间，用papaparse解析CSV文件也要花费一些时间。

因此，当“爸爸”工作时，显示某种进度会很好。我可以选择便宜的隐藏div，显示“我在工作”，但更喜欢使用<progress>。

不幸的是，在爸爸完成工作之后，酒吧才更新。因此，我尝试进入Webworkers，并使用工作文件来计算进度，并在Papa Parses配置中设置worker: true。仍然无济于事。

使用的配置（具有步进功能）如下：

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

被叫工人是：

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）似乎也被称为工人。如此看来，如果检查浏览器调试工具中的调用，但该站点仍无响应，直到显示所有数据。

谁能指出我做错了什么，或在哪里调整代码以获取正常的工作进度条？我想这也会加深我对网络工作者的理解。

最佳答案

您可以使用FileReader API以文本形式读取文件，将字符串用“ \ n”分割，然后计算返回数组的长度。然后，这是您的尺寸变量，用于计算百分比。

然后，您可以将文件字符串传递给Papa（您无需直接从文件中重新读取），并将行数（大小变量）传递给工作人员。（我不熟悉工人，因此不确定您的工作方式。）

显然，这仅在csv文件中没有嵌入式换行符的情况下才有效（例如，一个字符串分散在具有换行符的几行中），因为这些将算作多余的行，因此您不会将其设为100％。这不是致命的错误，但是如果看起来总是在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.
  };
}