javascript - 在没有警报的情况下处理时未初始化的变量

Question

我正在尝试用 Javascript/jQuery/PHP 构建一个日志阅读器，在 ingrid 表中显示文本文件的内容。

Javascript部分具有以下功能:

<script type="text/javascript">
$(function() {
  // Count number of lines in the log file
  var $anzahlElemente=0;
  $.countLines = function() {
    $.get("../log.log", function(text) {
      var $lines = text.split(/\r|\r\n|\n/);
      $anzahlElemente = $lines.length-1;
    });
  };

  // Generate table
  $.showTable = function() {
    $("#table1").ingrid({
      url: 'ingrid.php',
      height: 625,
      initialLoad: true,
      rowClasses: ['grid-row-style1','grid-row-style1','grid-row-style2','grid-row-style1','grid-row-style1','grid-row-style3'],
      sorting: false,
      paging: true,
      totalRecords: $anzahlElemente
    });
  }

$.countLines();
$.showTable();
});
</script>

现在的问题是函数处理的顺序或顺序似乎有问题。两个函数完成后，$anzahlElemente还是0。需要$anzahlElemente来显示表格分页功能。

奇怪的是，当我尝试以下操作时，第一个警报显示“0”，第二个警报显示正确的行数。如果没有警报，元素的数量和分页功能就会丢失。但有了它们，一切正常，除此之外我不想收到这些警报。 ;)

$.countLines();
alert($anzahlElemente);
alert($anzahlElemente);
$.showTable();

您是否需要所有其他部分，例如 html、php、css 和图像，还是您直接看到我的错误？

编辑:我希望允许附加文件。我没有找到上传选项，所以我这样做了: ingrid.zip

Answer 1

该问题是对涉及异步 I/O 的 javascript 代码如何执行的常见误解。在您的代码中，由于 $.get 是异步的，因此 showTable 实际上是在设置命名变量之前执行的。

您可以将代码更改为

var countLines = function(renderTable) {
    $.get("../log.log", function(text) {
      var $lines = text.split(/\r|\r\n|\n/);
      showTable($lines.length-1)
    });
};
// Generate table
var showTable = function(anzahlElemente) {
    $("#table1").ingrid({
      url: 'ingrid.php',
      height: 625,
      initialLoad: true,
      rowClasses: ['grid-row-style1',
                   'grid-row-style1',
                   'grid-row-style2',
                   'grid-row-style1',
                   'grid-row-style1',
                   'grid-row-style3'],
      sorting: false,
      paging: true,
      totalRecords: anzahlElemente
    });
}

$(function() {
  countLines(showTable);
});

通过这种方式，showTable 只会在 $.get 成功时执行。

详细一点。对 countLines 的调用实际上在对 $.get 的调用之前结束，并且在您的代码中，您将在 $.get 调用执行回调之前执行对 showTable 的调用(匿名函数设置$anzahlElemente。当您插入警报时，您正在更改时间，为对所述回调的调用提供足够的时间来执行。