javascriptの読み込み方教えてください、(sleepができない)

Question

コード
function csvData(dataPath){
 //csvデータを読み込みます
 //そのデータを配列に入れます
}

function printData(){
 //読み込んだデータをHTMLに出力させます。
}

csvData(dataPath);
printData();

大まかにはこのようなコードになっています。
順番的にはcsvを読み込んでから、HTMLに出力させているはずなのですが、logなどを使って色々確かめた結果、なんとなくcsvデータを配列に入れる前にprintData()をやっているような感じでした。
結果としては、配列にデータが入っていません、という主旨のエラーが出てきます。

これで最終手段としてはsleepを使わないといけないのかなと、この参考サイトを利用しましたが、うまくいきませんでした。

この問題の解決方法として何かわかる方は教えていただけないでしょうか。よろしくお願いいたします。

ご指摘を受けて

コード
const resultArray = []; //配列を用意
const vocabPosition = [];//単語の座標(出現回数、平均評価)
const output_topic = document.getElementById('topik_box');
const output_review = document.getElementById("review_box");
const output_img = document.getElementById("img_contener");
var topicNum;

function csvData(dataPath) {
    const request = new XMLHttpRequest(); // HTTPでファイルを読み込む
    request.addEventListener('load', (event) => { // ロードさせ実行
        const response = event.target.responseText; // 受け取ったテキストを返す
        if (/^csv/result/.test(dataPath)) {//
          loadTopic(response); //
        }else if(/^csv/sumAveBag/.test(dataPath)){//
          loadVocabPosition(response);
        }
    });
    request.open('GET', dataPath, true); // csvのパスを指定
    request.send();
}
//csvデータを配列に入れる
function loadVocabPosition(data){
  const dataString = data.split('\n'); //改行で分割
  for (let i = 1; i < dataString.length; i++) { //一番最初の行は飛ばす
      vocabPosition[i] = dataString[i].split(',');
  }
}
//csvデータを配列に入れる
function loadTopic(data){
  const dataString = data.split('\n'); //改行で分割
  for (let i = 1; i < dataString.length; i++) { //一番最初の行は飛ばす
      resultArray[i] = dataString[i].split(',');
  }
}

//配列の中身をHTMLで出力
function printVocab() {//トピックを表示する
    let insertElement = ''; //テーブルタグに表示する用の変数
    topicNum = resultArray[1].length/2;//トピック数
    for (var i = 1; i <= topicNum; i++) {//
      insertElement += "<div class=\"topic_contener\" id=\"topic_"+i+"\">"
      insertElement += "<div class=\"topic_contener2\">"
      insertElement += "<div class=\"attribute_contener\">";
      for (var j = 1; j <= outputWordsNum; j++) {//一列目は飛ばす
        insertElement += "<p id=\"atrVoc_"+i+"_"+j+"\">";
        insertElement += `${resultArray[j][2*i-1]}`;//属性
        insertElement += "</p>";
        moveVocabPosition(resultArray[j][2*i-1],"atrVoc_"+i+"_"+j);
      }
      insertElement += "</div>";
      insertElement += "<div class=\"evaluation_contener\">";
      for (var j = 1; j <= outputWordsNum; j++) {//一列目は飛ばす
        insertElement += "<p id=\"evaVoc_"+i+"_"+j+"\">";
        insertElement += `${resultArray[j][2*i]}`;//評価
        insertElement += "</p>";
        moveVocabPosition(resultArray[j][2*i],"evaVoc_"+i+"_"+j);
      }
      insertElement += "</div>"
      insertElement += "</div>";
      insertElement += "</div>";
    }
    output_topic.innerHTML = insertElement; // 表示
}

function moveVocabPosition(voc,vocid){
  var vocabID = vocabPosition[1].indexOf(voc);
  var element = document.getElementById(vocid);
  element.style.position = 'relative';
  element.style.left = vocabPosition[vocabID,1]+'px';
  element.style.top  = vocabPosition[vocabID,2]+'px';
}

csvData('csv/sumAveBag.csv');
csvData('csv/resultBag.csv');
printVocab();

問題はprintVocab()が配列に格納するより早く読み込んでしまうため、エラーには配列がNULLになってしまいます。

Comments

[hentaiman]

肝心のコードがすっからかんなので全く分かりませんが、async await promiseあたりで検索すれば解決するでしょう

[Lhankor_Mhy]

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[miyabi_pudding]

Node.jsでしょうか？
であるならば、Node.jsの質問タグを追加しましょう。
ブラウザ実行のJavaScriptには、sleepというメソッドは存在しません。
また、
サーバーサイド（Node.js側）で処理を止めたとしても、
フロントエンド側で、非同期処理をしていた場合、
処理が抜かされるので、
hentaimanさんのおっしゃる通り、Promiseなどの仕様を使う必要があります。
なので、フロントエンドの処理も記載ください。

[m.ts10806]

他者がコピペで動作確認できるコードを提示してください。
そのまま提示できないのなら、最小構成のコードで組みなおしてください。
半端なコードとザっと書かれただけの文章で他者が理解するのは無理があります。

[oika77]

すみません。コードを書きました。よろしくお願いいたします。

[m.ts10806]

細かいのですが実際のコードに「コード」という文字は入ってますか？
あくまで赤の他人なので、間違って入ったのか本当にそうなっているのか分からないのです。

[oika77]

入っていないです。

[hentaiman]

async await promiseで検索すればというアドバイスは見ましたか？調べましたか？
それとも試さずにコード載せただけですか？

[oika77]

コメントしてくださった方々、ありがとうございます!
コールバックでうまくいきそうです。

Answer 1

(sleepができない)

sleep は必要ありません。
参考にされたサイトは sleep 機能を題材にしていますが、「コールバック関数を受け取る関数」を説明しているだけです。

function csvData(dataPath, callback) {
  // xhr.onload 内で callback( result )
}


function printData( data ) {
  // data を処理して HTML を動的更新
}

csvData(dataPath, printData); // コールバックを第二引数に

dataPath を読んでから printData() が処理されます。
Promise によるフロー制御は、後からでも書き直せるので、まずはコールバック処理を書考えてみてください。

Comments

[oika77]

本当にありがとうございます !!
そういうことが知りたかったです。そもそもコールバックという概念が自分の中にありませんでした。
うまくいきました。