0

一个菜鸟问题，但我试图了解 PapaParse（或其他任何东西）如何使用回调。当我使用以下代码时：

这是修改后的完整代码：

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

</head>
<body>  
 <label>Load CSV file: </label><input type="file" id="fileInputCSV" /><br/>

    Results: 
    <table id="outputTable" border=1 px>
        <tbody id="objTable"></tbody>
    </table>


  <script type="text/javascript">      
 var csvData = [];  
 function GetCSV(doneCallback) {
   var fileInput = document.getElementById('fileInputCSV'); 
       Papa.parse(fileInput.files[0], {
       header: true,
       skipEmptyLines: true,

       complete: function(results) {
       console.log('Done.');
       doneCallback(results);
    }
   });
 }
}

GetCSV(function(csvData) {
    console.table(csvData.data);
   drawTable(csvData.data, "objTable");
});
    </script>
    </body>
</html>

我必须重新加载页面才能得到console.table，而PapaParse生成的对象在PapaParse函数之外是不可用的。

我知道这已经以其他形式被问过，但总是在 jQuery 中得到回答。有没有纯 JavaScript 的解决方案？我真的不仅需要能够显示数据，还需要能够使用它。

PapaParse 本身对他们的程序的这种基本使用非常安静......

谢谢！

4

2 回答 2

1

所有想要在可用时立即可靠地使用异步结果的代码必须要么位于完成回调函数内，要么必须位于从该回调函数调用的函数中。

这是因为异步响应发生在稍后的某个不确定时间。代码中唯一可以确切知道结果何时准备就绪的地方是完成回调本身。尝试将异步结果填充到某个更高范围的变量中然后稍后使用它是一种非常糟糕的做法，因为您的其他代码将不知道该值何时实际可用 - 通常会导致各种时间问题。

这是一种不同于顺序编程的编程类型。您不只是调用getCSV()然后在下一行代码中使用结果。直到一段时间后才能获得结果。

如果您想知道结果何时getCSV()可用，您可以构造它以便它接受回调：

function GetCSV(doneCallback) {
   var fileInput = document.getElementById('fileInputCSV'); 
   Papa.parse(fileInput.files[0], {
       header: true,
       skipEmptyLines: true,

       complete: function(results) {
           console.log('Done.');
           doneCallback(results);
        }
    });
 }

然后，您可以像这样调用它并在回调中使用结果：

GetCSV(function(csvData) {
    // use the data here
     drawTable(csvData.data, "objTable");
});
于 2015-11-23T22:15:16.127 回答
0

如果您在程序中添加一些 console.log 语句，您将看到它在 Papa.parse 函数中MakeTable的回调之前被调用。complete这在 Javascript 中是可以预料的，它不会在继续之前“等待”异步操作完成。这意味着当您使用回调时，您不能编写完成后“返回”的函数。相反，您需要编写完成后调用回调的函数。

修复程序的一种方法是向 GetCSV 函数添加回调参数

function getCSV(onDone) {
    Papa.parse(the_file, {
        complete: function(results) {
            consoel.log("got data")
            onDone(results); //pass our csv to the callback instead
                             //of setting a global variable.
        }
    });
}

getCSV(function(csv){
   makeTable(csv);
});
于 2015-11-23T22:15:19.003 回答