0

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

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

不幸的是，酒吧在爸爸完成工作后才更新。所以我尝试进入 webworkers 并使用工作文件来计算进度并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);
};

被调用的工人是：

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

   postMessage(newPercent);
}

进度条更新了，但是只有在解析完CSV文件并设置好数据之后，所以调用了worker，但是解析后处理了答案。Papa Parse 似乎也被称为工人。或者，如果检查浏览器调试工具中的调用，但站点仍然没有响应，直到所有数据都显示出来。

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

4

2 回答 2

1

您可以使用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.
  };
}
于 2016-08-11T15:58:35.300 回答
0

我以前没有在工人中使用过 Papa Parse，但是在玩了一会儿之后会弹出一些东西：

  • 似乎不希望您直接与工人互动
  • 它希望您要么想要整个最终结果，要么想要单个项目

使用 web worker 使得提供 JS Fiddle 变得不可行，但这里有一些 HTML 演示了第二点：

<html>
<head>
    <script src="papaparse.js"></script>
</head>

<body>
<div id="step">
</div>

<div id="result">
</div>

<script type="application/javascript">
    var papaConfig = {
        header: true,
        worker: true,
        step: function (row) {
            var stepDiv = document.getElementById('step');
            stepDiv.appendChild(document.createTextNode('Step received: ' + JSON.stringify(row)));
            stepDiv.appendChild(document.createElement('hr'));
        },
        complete: function (result) {
            var resultDiv = document.getElementById('result');
            resultDiv.appendChild(document.createElement('hr'));
            resultDiv.appendChild(document.createTextNode('Complete received: ' + JSON.stringify(result)))
            resultDiv.appendChild(document.createElement('hr'));
        }
    };

    var data = 'Column 1,Column 2,Column 3,Column 4 \n\
1-1,1-2,1-3,1-4 \n\
2-1,2-2,2-3,2-4 \n\
3-1,3-2,3-3,3-4 \n\
4,5,6,7';

    Papa.parse(data, papaConfig);
</script>
</body>

</html>

如果您在本地运行此程序，您将看到 CSV 数据的四行中的每一行都有一行，但对complete回调的调用将获取undefined. 就像是：

Step received: {"data":[{"Column 1":"1-1",...
Step received: {"data":[{"Column 1":"2-1",...
Step received: {"data":[{"Column 1":"3-1",...
Step received: {"data":[{"Column 1":"4","...
Complete received: undefined

但是，如果您删除或注释掉该step函数，您将获得所有四个结果的一行：

Complete received: {"data":[{"Column 1":"1-1",...

另请注意，Papa Parse 使用流式概念来支持step回调，无论是否使用工作者。这意味着您不会知道直接解析了多少项目，因此无法计算完成百分比，除非您可以单独找到项目的长度。

于 2016-07-28T14:50:26.310 回答