タイマー付きJavascriptアップデートテーブル（csvファイルに隠されています）

Question

皆さん。私は興味深い質問があります。あなたの助けに感謝します。一つのタスクを解決に取り組んで：

、初期 ビュー

ロード提供CSVデータを使用して財務ティッカーグリッドを実装し、モデルにsnapshot.csv内のデータを解析します。

そのデータに基づいてグリッドをDOMにレンダリングします。

deltas.csvで動作するエンジンを作成し、更新メッセージを に出力します。

行に数値だけが存在する場合は、次のデルタセットを処理するまで、 ミリ秒の時間を待機する必要があります。 デルタの最後のセットが処理されると、 ファイルの先頭に戻り、繰り返します。

デルタの各セットは、既存のデータセットにマージし、 をできるだけ効率的にDOMに伝播する必要があります。

UIのビジュアルフレア でアイテムが更新されたという通知を提供します。

私のパス： 私は、テーブルを更新しようと、それを解析し、snapshot.csvをロードし、それを解析し、その後、テーブルを作成する（約束を使用して）、第二のファイルdelta.csvをアップロードするために管理してきましたが、 delta csvファイルのミリ秒単位でテーブルを更新するタイマー機能を作成するのに苦労しています。あなたのアドバイスを事前にありがとう））私はJavaScriptを学んでいる、と挑戦を探して、これは興味深いもののように見えた。

function CSVToArray(strData, strDelimiter){ 
 
    strDelimiter = (strDelimiter || ","); 
 
    var objPattern = new RegExp(
 
     (
 
      // Delimiters. 
 
      "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" + 
 

 
      // Quoted fields. 
 
      "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + 
 

 
      // Standard fields. 
 
      "([^\"\\" + strDelimiter + "\\r\\n]*))" 
 
    ), 
 
     "gi" 
 
    ); 
 
    var arrData = [[]]; 
 
    var arrMatches = null; 
 
    while (arrMatches = objPattern.exec(strData)){ 
 
     var strMatchedDelimiter = arrMatches[ 1 ]; 
 
     if (
 
      strMatchedDelimiter.length && 
 
      strMatchedDelimiter !== strDelimiter 
 
     ){ 
 
      arrData.push([]); 
 
     } 
 
     var strMatchedValue; 
 
     if (arrMatches[ 2 ]){ 
 
      strMatchedValue = arrMatches[ 2 ].replace(
 
       new RegExp("\"\"", "g"), 
 
       "\"" 
 
      ); 
 
     } else { 
 
      // We found a non-quoted value. 
 
      strMatchedValue = arrMatches[ 3 ]; 
 
     } 
 
     arrData[ arrData.length - 1 ].push(strMatchedValue); 
 
    } 
 

 
    // Return the parsed data. 
 
    return(arrData); 
 
    } 
 

 
function httpGet(url) { 
 
    return new Promise(function(resolve, reject) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.onload = function() { 
 
     if (this.status == 200) { 
 
     resolve(this.response); 
 
     } else { 
 
     var error = new Error(this.statusText); 
 
     error.code = this.status; 
 
     reject(error); 
 
     } 
 
    }; 
 
    xhr.onerror = function() { 
 
     reject(new Error("Network Error")); 
 
    }; 
 
    xhr.send(); 
 
    }); 
 

 
} 
 

 
var r1,r2 
 
httpGet('snapshot.csv').then(function(result) { 
 
    r1 = CSVToArray(result); 
 
    createTable(r1); 
 
    return httpGet('deltas.csv') 
 
}).then(function(result2) { 
 
    r2 = CSVToArray(result2); 
 
    updateTable(r2) 
 
    }); 
 

 
var hInterval = null; 
 
var k = 0; 
 
var iteration=0; 
 
function updateTable(how) { 
 
    var myTable = document.getElementById('myTable'); 
 
    var j=1; 
 
    var watch_dog=0; 
 
    var x = document.getElementById("myTable").rows[0].cells; 
 
    console.log(x); 
 
    while(j<myTable.rows.length) { 
 

 
     if (typeof(how[k]) !== "undefined") { // 
 

 
      var startPos = 2; //In file we have broken data (some time 6 columns some time 5) 
 
      if (how[k].length === 5) 
 
       startPos = 1; 
 

 
      var valueAdded=0; //How much value changed 
 
      for (var i = startPos; i < startPos + 3; i++) { 
 

 
       var value = how[k][i]; 
 

 
       if (typeof(value) !== "undefined") { 
 
        valueAdded++; 
 
        if (value.length > 0) { 
 
         if (startPos === 2) 
 
          myTable.rows[j].cells[i].innerHTML = value; 
 
         else 
 
          myTable.rows[j].cells[i + 1].innerHTML = value; 
 
        } 
 
       } 
 
      } 
 

 
      if (valueAdded>0) //if some values changed we are increment j 
 
      j++; 
 

 
      k++; //Increment global row pointer 
 

 

 
     } else { 
 
      //Restart when we finished 
 
      iteration=1; 
 
      k=0; 
 
      break; 
 
     } 
 
    } 
 
} 
 

 

 
function createTable(now) { 
 
var body = document.getElementsByTagName("body")[0]; 
 
    // create elements <table> and a <tbody> 
 
    var tbl  = document.createElement("table"); 
 
    var tblBody = document.createElement("tbody"); 
 
    tbl.setAttribute("id","myTable"); 
 
    // cells creation 
 
    for (var j = 0; j < now.length-1; j++) { 
 
     // table row creation 
 
     var row = document.createElement("tr"); 
 

 
     for (var i = 0; i < now[0].length; i++) { 
 
      // create element <td> and text node 
 
      //Make text node the contents of <td> element 
 
      // put <td> at end of the table row 
 
      var cell = document.createElement("td"); 
 
      var cellText = document.createTextNode(now[j][i]); 
 

 
      cell.appendChild(cellText); 
 
      row.appendChild(cell); 
 
     } 
 

 
     //row added to end of table body 
 
     tblBody.appendChild(row); 
 
    } 
 

 
    // append the <tbody> inside the <table> 
 
    tbl.appendChild(tblBody); 
 
    // put <table> in the <body> 
 
    body.appendChild(tbl); 
 
    // tbl border attribute to 
 
    tbl.setAttribute("border", "2"); 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Application</title> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
\t  <meta name="description" content="Demo project"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
 
\t \t <link rel="stylesheet" href="styles.css"> 
 
\t \t <style type="text/css"></style> 
 
\t </head> 
 
\t <body> 
 
\t \t <p>Let the game begin!</p> 
 
\t </body> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="script.js"></script> 
 
</html>

プロジェクトファイル： https://dw3i9sxi97owk.cloudfront.net/uploads/jobAttachments/150928161919_pph.zip

Answer 1

あなたはX秒で次の行を処理するためにタイムアウトをのを設定し、その後、一度に1行を処理する再帰関数を記述することができます。以下のコードはちょっとした疑似コードですが、変数や何も使用していませんが、このコードからアイデアを得ることができれば幸いです。これは、時間の経過を待ってから次の行を呼び出す再帰関数です。

function processRow(row, waitTime) { 
    setTimeout(function() { 
     //do your row stuff here 

     //move on to the next row, look at it's wait time and pass that along 
     var nextRow = row+1, 
      nextWaitTime = nextRow.waitTime; 
     processRow(nextRow, nextWaitTime); 
    }, waitTime); 
} 

//run the first instance 
var firstRow = 1, 
    firstWait = firstRow.wait; 
processRow(firstRow, firstWait);