javascript - jQuery 和 javascript 的可变范围

Question

所以，我写了下面的函数:

function getData() {

   var data;
   $(function () {
      $.getJSON('https://ipinfo.io', function (ipinfo) {
          data = ipinfo;
          console.log(data);
     })
   })

console.log(data);
}

上面的问题是第二个 console.log 不保留来自 jQuery 内部分配的信息并记录一个 undefined object 。我不确定哪里出了问题，但我相信这是非常小的事情。然而，尽管我在网上搜索了很多，但我还没有找到这个特定问题的答案。

Answer 1

一句话:Javascript 是异步的。

虽然许多人都在努力弄清楚它的确切含义，但一个简单的例子可能会向您解释这一点。

1. 您从 URL 请求一些数据。
2. 当接收到来自第二个 URL 的数据时，您希望用接收到的数据设置一个变量。
3. 您希望在请求函数的回调之外(发出请求后)使用它。

对于常规程序员来说，很难理解 JavaScript 的执行顺序不是 1,2 然后 3，而是 1,3,2。

之所以会发生这种情况，是因为 Javascript 的事件循环机制，其中每个异步操作都与一个事件相关联，并且只有在事件发生时才会调用回调。同时，回调函数外的代码在不等待事件实际发生的情况下执行。

在你的情况下:

var data;
$(function () {
   $.getJSON('https://ipinfo.io', function (ipinfo) {//async  function's callback
      data = ipinfo;
      console.log(data);//first console output
  })
})

console.log(data);//second console output

当从 $.getJSON 函数接收到数据时执行异步函数的回调时，javascript 会继续执行，而无需等待 callback 将值分配给data 变量，导致您在控制台中记录 undefined(这是调用 console.log 时 data 变量的值。

我希望我能解释清楚!