为什么我在全局定义这个变量时没有定义它？ (javascript, p5.js)

Question

我正在使用 JS 来获取 JSON，并使用 p5.js 库（以下来源）根据其中的数据绘制画布和点。 ellipse() 函数需要获取变量 position，但该变量只能从 console.log("position inside function") 所在的位置访问，而不是全局访问。

我的代码如下：

function setup() {
  createCanvas(400, 400);
}
var position;
function draw() {
  var promise = fetch("http://api.open-notify.org/iss-now.json");
  
  background(20, 29, 22);
  promise.then(response => {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }
    response.json().then(data => {
      window.position = data;
    })
    .catch(error => {
      console.log(error.message);
    })
    console.log("position inside function");
    setTimeout(function(){
      if(position.iss_position.longitude && position.iss_position.latitude)
      console.log("longitude" + position.iss_position.longitude);
      console.log("latitude" + position.iss_position.latitude);
    },500);
  })
  translate(180, 180);
  ellipse(parseFloat(window.position.iss_position.longitude), parseFloat(window.position.iss_position.latitude), 4, 4);
}

<script src="https://github.com/processing/p5.js/releases/download/1.1.9/p5.min.js"></script>

我已经阅读了关于 JS 中全局变量的不同来源，并在变量声明中尝试了 window.position 而不是 position 的不同组合，尝试在没有 var 的情况下声明它并在 setup() 函数中声明它。到目前为止没有任何效果。我有点 JS 菜鸟，我认为这是我忽略的一个非常基本的因素。

Answer 1

试着把那些线放在一边

translate(180, 180);
ellipse(parseFloat(window.position.iss_position.longitude), parseFloat(window.position.iss_position.latitude), 4, 4);

在你的 response.then() 中。

promise 是异步工作的，当您在 promise 之外调用函数时，可能未设置变量值。