無法操作全局變量（返回未定義）

Question

我正在嘗試通過chartJS顯示使用變量year1 / 2/3從API獲得的值。 由於某些原因，當我在調用“ getData”后控制台日志時，var 1/2/3的值是不確定的。

$(function() {

    var year1; /* 1998 */

    function getData() {

      /* Get First Year */
      $.getJSON('https://data.gov.sg/api/action/datastore_search?resource_id=26e9766b-a42d-468c-9c25-88d89b850823&q=1998', function(result) {

        year1 = (result.result.records[0].mobile_penetration_rate);

      })

    }

    getData();

    console.log(year1);

    var ctx = document.getElementById('penetration-chart');
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['1998'],
        datasets: [{
          label: '% of Mobile Penetration',
          data: [year1],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  })

調用getData后記錄期望的變量

Answer 1

您必須在api調用的成功回調方法中使用console.log，因為$.getJSON方法異步調用api並繼續執行而無需等待API結果。 從API調用返回響應后，將使用響應對象執行回調方法

$.getJSON('https://data.gov.sg/api/action/datastore_search?resource_id=26e9766b-a42d-468c-9c25-88d89b850823&q=1998', function(result) {

      year1 = (result.result.records[0].mobile_penetration_rate);
      console.log(year1);

    })

getData();

Answer 2

API調用是異步完成的，這意味着year1到console.log的時間尚未定義，而console.log是同步執行的。 您可以等待提取操作運行，然后執行其余代碼，這將解決您的問題：（注意返回$ .getJSON，這將返回由.getJSON創建的承諾，.then將等待解析。執行之前）

var year1; /* 1998 */

    function getData() {

        /* Get First Year */
        return $.getJSON('https://data.gov.sg/api/action/datastore_search?resource_id=26e9766b-a42d-468c-9c25-88d89b850823&q=1998', function(result) {

             year1 = (result.result.records[0].mobile_penetration_rate);

        })

    }

getData().then(()=> {
    console.log(year1);
    // All other code that depends on year 1
});