JavaScript 中的回调

Question

一个菜鸟问题，但我想了解 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 本身在对他们程序的这种基本使用方面非常安静....

谢谢！

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

Answer 2

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

修复程序的一种方法是向 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);
});

JavaScript 中的回调

Callbacks in JavaScript

javascript

callback

papaparse