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'をグローバル変数に置き換えようとしました - 同じ問題です。

私はこの単純な問題に困惑し、新鮮な目の誰かが私の誤りを指摘できるならば、世界に感謝します。

ありがとうございました！ makeRequestは、そのコールバック関数は、要求が完了するとだけ呼び出されることを意味し、非同期AJAX呼び出しているように見えるので ティモン

Answer 1

rは、最も可能性の高い定義されていません。呼び出しは非同期なので、JSランタイムはそこで待機せず、その後のステートメントの実行を続けます。この場合、changeBackgroundとgenerateArticleの呼び出しが実行されます。ただし、この時点までにAJAX呼び出しが返されず、コールバックが呼び出されていないため、はまだnullです。だからr.bgColorのようなrの任意のプロパティにアクセスしようとするとReferenceErrorが投げられます。

Answer 2

の間に値を与える前にrを使用しようとしているようです。あなたのページをロードするときには、rは値を取得しないので、歴史はありません。そして、あなたはrに値を割り当てる非同期関数を持っていますが、非同期コードが実行される前に値を持つrが必要なコードが実行されます。