使用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中的赋值信息并记录一个未定义的对象。 我不确定是什么问题，但我认为这是一个非常小的问题。 然而，就像我在网上搜索一样，我还没有找到这个特定问题的答案。

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函数接收数据时执行async函数的回调，javascript继续进行而不等待callback将值赋给data变量，导致您在控制台中记录undefined （这是值调用console.log时的data变量。

我希望我能解释一下。