Question

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

所以，如果＆＃34; papa＆＃34;显示某种进展会很好。工作中。我可以选择廉价隐藏的div，显示＆＃34;我正在工作＆＃34;，但更喜欢使用<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似乎也被称为工人。或者看起来如果在浏览器调试工具中检查调用，但是在所有数据都显示之前，网站仍然没有响应。

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

Answer 1

您可以使用FileReader API将文件作为文本读取，将字符串拆分为＆＃34; \ n＆＃34;然后计算返回数组的长度。这是你的大小变量，用于计算百分比。

然后，您可以将文件字符串传递给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.
  };
}

Answer 2

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

似乎不希望您直接与工作人员进行互动
您希望自己想要整个最终结果或各个项目

使用Web工作者会使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回调。这意味着您无法直接知道要解析的项目数，因此除非您可以单独找到项目的长度，否则无法计算完成百分比。

使用Web worker设置Papa Parse进度条

2 个答案: