与网络工作者一起设置Papa Parse进度条

Setting up a Papa Parse progress bar with Web workers

本文关键字：Parse Papa 设置 网络 工作者 一起      更新时间：2023-09-26

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

所以，当"爸爸"工作的时候，如果能有一些进展，那就太好了。我可以选择廉价的隐藏div，显示"我正在工作"，但更喜欢使用<progress>。

不幸的是，酒吧在爸爸完成工作后才更新。因此，我尝试进入webworkers，使用worker文件来计算进度，并在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文件并用数据设置站点之后，才会更新，因此会调用worker，但解析后会处理答案。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.
  };
}

我以前没有和工人一起使用过Papa Parse，但玩了一段时间后会弹出一些东西：

  • 它似乎并不期望你与员工直接互动
  • 它希望您想要整个最终结果，或单个项目

使用网络工作者使得提供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回调，而不管是否使用worker。这意味着你不知道你直接解析了多少个项目，所以除非你能单独找到项目的长度，否则计算完成百分比是不可能的。

相关文章：