Table-building Javascript 函数导致页面加载错误

Question

最近，我一直在尝试在 html 中动态创建一个 table，其中包含某个文件夹中的所有文件。我决定制作一个批处理文件来创建一个包含所有文件列表的文本文件，然后在 javascript 函数中使用生成的文本文件来填充 table.

函数 showDownloads 在页面加载时被调用，并抛出以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined
    at showDownloads (script.js:8)
    at onload ((index):9)

但是，如果我从控制台运行 showDownloads()，它会正确生成 table 而不会抛出任何错误。

var downloadPath = "../builds/dev-versions/";
var downloads;

function showDownloads() {
  getData();
  var table = document.getElementById('downloadTable');

  for (var i = 0; i < downloads.length; i++) {  //Error happens here
    var row = document.createElement('tr');
    for (var j = 0; j < downloads[i].length; j++) {
      var cell = document.createElement('td');
      var file = document.createElement('a');
      file.setAttribute('href', downloadPath + downloads[i][j]);
      file.setAttribute('download', downloads[i][j]);
      file.innerHTML = downloads[i][j];

      cell.appendChild(file);
      row.appendChild(cell);
    }
    table.appendChild(row);
  }
}

function getData() {
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();
       }
       else {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }

       xmlhttp.onreadystatechange = function () {
           if (xmlhttp.readyState == 4) {
             var lines = xmlhttp.responseText;

             intoArray(lines);
           }
       }

       xmlhttp.open("GET", "devFiles.txt", true);
       xmlhttp.send();
}

function intoArray (lines) {

   var lineArr = lines.split('\n');
   lineArr.pop();

   downloads = new Array(lineArr.length / 2);

   var j = 0;
   for (var i = 0; i < lineArr.length; i += 2) {
     downloads[j] = [lineArr[i], lineArr[i + 1]];
     j++;
   };
}

为什么数组 downloads 在第一次调用时被认为是未定义的？

为什么它不是通过调用 getData 创建的？

Answer 1

我想这是一个异步问题，for 循环不等待 getData 完成，所以在页面加载时，下载仍然是空的，但是当你在控制台中尝试时，下载已经完成并且将数据存储在下载中。由于它是一个全局变量，当您在控制台中运行它时，它可能实际上正在处理来自先前数据获取的数据。

Table-building Javascript 函数导致页面加载错误

Table-building Javascript function causes error on page load

javascript

xmlhttprequest

onload