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 で予期されることです。これが意味することは、コールバックを使用している場合、完了時に「戻る」関数を作成できないということです。代わりに、完了時にコールバックを呼び出す関数を作成する必要があります。

プログラムを修正する 1 つの方法は、コールバック パラメーターを 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 に答える