无法在函数内更改全局变量的值答案

【问题标题】：Cannot change value of global variable inside a function无法在函数内更改全局变量的值
【发布时间】：2019-11-01 17:12:28
【问题描述】：

我在 home.page.ts 中创建了一个方法来从 AirVisual API 检索 json 并将特定数据解析到 home.page.html

但是，函数 () 中的代码似乎没有为全局变量分配任何值。

export class HomePage {

  constructor() { }

  aqi: string;

  getAQI() {
    var value;
    var r = new XMLHttpRequest();
    r.responseType = 'json';
    r.open('GET', "http://api.airvisual.com/v2/city?city=Bang%20Rak&state=Bangkok&country=Thailand&key=30c3e5bd-32d3-4fdb-b2dd-fe36928850b5", true);
    r.onload = function () {
      var jsonResponse = r.response;
      value = parseInt(jsonResponse.data.current.pollution.aqius);
      console.log(value); // This print the value from JSON
    }
    r.send();
    console.log(value); // This print undefined in console
    this.aqi = String(value);
  }

由于函数外的value是未定义的，所以aqi也是。因此，我无法在我的 html 页面上使用它。

【问题讨论】：

标签： typescript ionic-framework

【解决方案1】：

您正在为 .onload 设置事件处理程序，但您的 getAQI 函数将在 r.send() 之后继续本地执行并运行下一行。由于 onload 还没有发生并被处理，它仍然是未定义的。 onload() 将在那之后发生。如果您在 onload 函数和 console.log 行中放置断点，您应该会看到执行顺序。

【讨论】：

哦，我明白了，那么我如何从该函数中获取值以将其应用于全局变量。我无法在 r.onload() 范围内更改aqi，我也无法在 r.send() 之后更改aqi，因为 r.onload() 尚未执行。
您正在从该函数中获取价值并将其应用于（不是全局但作用域的）变量。它有效，您只需要 setTimeout() 并在 onload 运行后检查。