javascript jQuery 变量作用域

Question

提前致谢。我正在为我与合作伙伴一起运营的一项名为 Laughter Yoga Dublin 的服务制作网站。我遇到了一个让我陷入困境的问题。下面看起来有很多代码，但我的问题主要(我认为)与第一行和最后几行有关。

如您所见，前五行是变量声明。这些行之后是一个 jQuery 函数开头($.getJSON etc...)，其中处理这些变量。该函数在下面给出的最后几行代码之前结束。

我的问题是:为什么代码末尾的行(console.log etc...)显示变量的值不受前面函数的影响？我是第一个承认我对这些编程东西很陌生的人，但我认为既然我在函数外部声明了变量，那么它们的值就可以从函数内部更改。我错了吗？我发现它有点难以理解，而且我自己(有限的)经验似乎与下面这段代码的效果相矛盾。

我愿意研究和学习，但我真的很感激即使是在正确的方向上解决这个问题。

再次感谢，尼尔，都柏林，爱尔兰。

    var events = []
    var theBitImInterestedIn
    var prettyDate;
    var nextEventString;
    var JSONurl = 'https://www.google.com/calendar/feeds/avmknaehgjre8qjqhbi22fn8mo%40group.calendar.google.com/public/basic?alt=json&orderby=starttime&max-results=20&singleevents=true&sortorder=ascending&futureevents=true';     
    $.getJSON(JSONurl ,function(data){
    theBitImInterestedIn = data.feed.entry;
    $.each(theBitImInterestedIn, function(key, val){
        var event = {};
        var Content = val.content.$t;
        var weekDayNumber, weekDay = '', Days=['Mon','Tue','Wed','Thu', 'Fri', 'Sat', 'Sun'];
        var monthNumber, monthOfTheEvent = '', Months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        var venue = theBitImInterestedIn[0].content.$t
        venueBegin = venue.indexOf('Where');
        venueMod = venue.substring(venueBegin);
        venueEnd = venue.indexOf('<br') -2;
        venue = venueMod.substring(7, venueEnd);
        $.each(Days, function(key, val){
        if (Content.match(Days[key])){
            weekDay = val;
            weekDayNumber = key + 1;
        }
        })
        $.each(Months, function(key, val){
        if (Content.match(Months[key])){
            monthOfTheEvent = val;
            monthNumber = key + 1;
        }
        })
        var actualDay = Content.match(/\d+/)[0];
        var year = Content.match(/\d+/g)[1];
        event.Title = 'Laughter Yoga';
        var tempDate = monthNumber  + '/' + actualDay + '/' + year;
        var prettyDate = weekDay + ' ' + actualDay + ' ' + monthOfTheEvent + ' ' + year;
        event.Venue = venue;
        event.PrettyDate = prettyDate;
        event.Date = new Date(tempDate);
        events.push(event);
    })
    nextEventString = 'Next class: ' + events[0].PrettyDate + ' at ' + events[0].Venue;
    //$('p').html(nextClassString).appendTo('#next-class');
    });
console.log(events);     //these result in an empty [] and undefined 
console.log(theBitImInterestedIn)
console.log(prettyDate)
console.log(nextEventString)

Answer 1

如前所述，getJSON 是异步的。为了让 console.log 对更改的变量执行任何操作，您需要在异步调用后在函数中调用它们。

var events = []
var theBitImInterestedIn
var prettyDate;
var nextEventString;

function callJSON() {
  var JSONurl = 'https://www.google.com/calendar/feeds/avmknaehgjre8qjqhbi22fn8mo%40group.calendar.google.com/public/basic?alt=json&orderby=starttime&max-results=20&singleevents=true&sortorder=ascending&futureevents=true';     
  $.getJSON(JSONurl ,function(data){

      ...

      ///////////////////////////////////////////////////////////////
      // call to show console log
      ///////////////////////////////////////////////////////////////
      logConsole()

  });

}

function logConsole() {
  console.log(events);     //these result in an empty [] and undefined 
  console.log(theBitImInterestedIn)
  console.log(prettyDate)
  console.log(nextEventString)
}