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

Question

我正在使用 JS 获取 JSON 和 p5.js 库（下面的源代码）以根据其中的数据绘制 canvas 和一个点。 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 之外调用函数时，可能未设置变量值。

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

Why is this variable not defined when I defined it globally? (javascript, p5.js)

javascript

p5.js