Javascript 如何在AJAX导航中返回状态？

我正在尝试创建AJAX导航，并遇到了popState的问题。下面是一个pushStates页面名的函数（也将指定的div从content.html加载到.mainwrap）。有一个自调用函数，用于解析url并确定要加载的内容，其中有一个popstate事件处理程序。最后是具有数据页属性的元素的单击处理程序，以使它们“ajaxified”。我怎么会做错这件事

function loadPageContent(pageName){
  $('.mainwrap').animate({opacity: 0}, 250, function(){
    $(this).empty();
    $(this).load('content.html #' + pageName, function(){
      $('.flexslider').flexslider({
        animation: 'fade'
      });
      vertCenter();
      $(this).animate({opacity: 1}, 250);
    });
  });
  history.pushState({}, null, "#"+pageName);
}

$(function() {
  var lastPage;
  (function() {

    var url = document.URL,
    loadPage = url.split("#"),
    data;

    if(loadPage[1]) {
      data = loadPage[1];
    } else {
      data = "home";
    }
    loadPageContent(data);
    window.addEventListener('popstate', function(event) {
      console.log('popstate fired!');
      loadPageContent(lastPage);
      }); 
  }());

$(document).on('click', 'a[data-page]', function(event){
  event.preventDefault();
  lastPage = page;
  var page = $(this).attr('data-page')
  loadPageContent(page);
  return false;
  });
});

---

编辑：正如建议的那样，我将“var lastPage”放在两个函数之间，而不是放在两个函数内部。还没修好。我“返回”的url是/#未定义的

请注意，

lastPage

变量无法从单击处理程序访问。有什么建议吗？lastPage是我在按下“后退”/“下一步”浏览器按钮时如何跟踪要返回的页面。为什么不将其上移一行，并将其放在两个功能之间。