未在函数范围内声明的 Javascript 变量

Question

我最近一直在使用 MooTools 开发一些简单的 AJAX 功能。我的问题在于紧随其后的代码:

function changePage(id, url) {
    var c = false,
        r = null;

    for (i = 0; i < history.length; i++) {
        if(history[i]['id'] === id) {
            console.log('cached');
            r = history[i].response;
            c = true;
        }
    }
    if(!c) {
        makeRequest(url, function(response) {
            r = response;
            history.push({id: id, response: response});
        });
    }

    changeBackground('_background', {color: r.bgColor, image: r.bgImage});
    lightboxContents(generateArticle(r.article.id, r.article.title, r.article.body, r.article.timestamp));
    return true;
}

在这里，无论何时执行代码(通过点击路由)，都会向我发送错误消息“'r' 未定义”- 在我看来，这是一个非常错误的声明。

就此而言，我还尝试使用“window”对象将“r”替换为全局变量——同样的问题。

我曾经对这个简单的问题感到困惑，如果有新眼光的人能指出我的错误，我将不胜感激。

感谢您的宝贵时间! 丁满

Answer 1

r 很可能是未定义的，因为它看起来像 makeRequest 是一个异步 AJAX 调用，这意味着它的回调函数仅在请求完成。由于调用是异步的，JS 运行时不会在那里等待，而是继续执行它之后的语句，在您的例子中是对 changeBackground 和 generateArticle 的调用。但是，由于此时 AJAX 调用还没有返回，回调也没有被调用，所以 r 仍然是 null。因此，尝试访问 r 上的任何属性，如 r.bgColor 将抛出 ReferenceError。