Question

最近，我一直试图在某种程度上动态创建一个包含某个文件夹中所有文件的html表。我决定创建一个批处理文件来创建一个包含所有文件列表的文本文件，然后在javascript函数中使用生成的文本文件来填充表格。

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

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

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

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完成，所以在页面加载时，下载仍然是空的，但是当你在控制台中尝试它时，下载将完成并将数据存储在下载中。由于它是一个全局变量，因此当您在控制台中运行它时，它实际上可能正在处理先前数据提取中的数据。

表构建Javascript函数会导致页面加载错误

1 个答案: