为什么 Google Gauge Chart 可以在 Chrome 中工作，但不能在 Firefox 中工作？

Question

我的流星应用中有一个 Google Gauge 图表。

它在 chrome 中运行良好，但在 Firefox 中却不行。但是，条形图在两种浏览器上都可以使用。

我收到以下错误消息：

来自 Tracker afterFlush 函数的异常：meteor....db5f41c（第 888 行） ReferenceError：drawChart 未定义 guageChart@http://localhost:3000/app/client/templates/Dashbaord/DashboardBudgetGuageChart.js?d50528e5cd924eb71fef044b93dde03e3531923b:54:4 @http://localhost:3000/app/client/templates/Dashbaord/DashboardBudgetGuageChart.js?d50528e5cd924eb71fef044b93dde03e3531923b:44:3 fireCallbacks/

代码在这里：我在 OnRendered 模板事件中调用这个 guageChart 函数。

function guageChart() {
  var currentuserid = Meteor.userId();
  if (currentuserid) {
    google.load('visualization', '1.1', {
      'packages': ["gauge"],
      callback: drawChart
    });

    function drawChart() {
      Tracker.autorun(function () {
        var dataarray = getbudExpenseData()
        var myDiv = document.getElementById('BudgetGuageChart')
        var varselectedAccount = Session.get("SelCurrentAccount")
        if (varselectedAccount && dataarray && myDiv) {
          var budExpenseSum = dataarray[0];
          var redfrom = dataarray[1];
          var redto = dataarray[2];
          var yellowfrom = dataarray[3];
          var yellowto = dataarray[4];
          var data = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Budget', budExpenseSum]
          ]);
          var options = {
            width: 600, height: 250,
            max: redto, min: 0,
            redFrom: redfrom, redTo: redto,
            yellowFrom: yellowfrom, yellowTo: yellowto,
            minorTicks: 5,
          };
          var chart = new google.visualization.Gauge(document.getElementById('BudgetGuageChart'));
          chart.draw(data, options);
        }
      })
    }
  }
}

我做错了什么？

Answer 1

Firefox 不会提升块内的函数声明（据我所知，这也是根据标准。

Chrome 将它们视为语句并提升它们，尽管它们应该是块范围的（在 ES2015 中）或未提升的表达式（在 ES5 中）。

例如，在 Firefox 中：

function bar() {
    if (true) {
        foo();
        function foo() { //declared within a block
            console.log('foo');
        }
    }
}

bar(); // fails - ReferenceError: foo is not defined

function bar() {
    if (true) {
        foo()
    }
    function foo() { // declared in function body
        console.log('foo');
    }
}

bar(); // logs "foo"

因此，简短的回答是：避免在块中声明函数，除非你真的打算这样做。

似乎该特定函数可以完全在guageChart() 之外声明。