使用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變量。

我希望我能解釋一下。