定義された変数は、jQuery経由でajax呼び出しの中でどのように未定義に設定されますか？私は成功を返すAPIへのAJAX呼び出しを行っています

Question

、しかし私は、なぜ取得しないundefinedに設定されます変数と若干の問題があります。私は<i>要素を選択し、ロードバーとして表示するために、変数内に格納し、私は、成功コールバック関数の内部で再びそれを隠そう。

要素が正常に保存され、AJAX呼び出しの前にロードバーを表示するために使用され、しかし、それは成功コールバックの内側にその未定義というエラーを与えます。私はこの問題を引き起こす可能性があることに困惑しています。他のソリューションをオンラインで見つけることができませんでした。以下のコードをご覧ください。

<i>要素の後に宣言された<ul>要素があり、未定義に設定されることはありません。

$("li.country").on("click", function(){ 
    var i = $(this).find("i"); //this is where the element is stored 
    var cc = $(this).attr("data-city") + $(this).attr("data-country-code"); 
    var ul_week = $("#week"); 
    i.toggleClass("no_show"); //works fine here, shows the element 
    $.ajax({ 
     url:  forecast_base_url + cc + units + APPID, 
     success: function(result){ 
     i.toggleClass("no_show"); //gives an error here 
     $("#cc_city").html("This forecast for " + result.city.name + "."); 
     ul_week.html(""); 
     for (var i = 0; i < result.list.length; i++) { 
      ul_week.append(
      "<li>Hello World"+ i +"</li>" 
     ); 
     } 
     console.log(result); 
     }, 
     error:  function(err){ 
     console.log(err); 
     } 
    }); 
    }); 

Answer 1

@charlietflは問題があなたのAJAXコールバックではなく、jQueryのiを上書き内の問題内の変数の巻上げによるものであることを指摘しました。

JavaScriptは（ES6 letを除いて）ブロックスコープを持っていないので、forループ内var宣言はそうのようなトップに掲揚されます：

$.ajax({ 
    url:  forecast_base_url + cc + units + APPID, 
    success: function(result){ 
    var i = undefined; // variable i is hoisted up 
    i.toggleClass("no_show"); //gives an error here 
    $("#cc_city").html("This forecast for " + result.city.name + "."); 
    ul_week.html(""); 
    for (i = 0; i < result.list.length; i++) { 
     ul_week.append(
     "<li>Hello World"+ i +"</li>" 
    ); 
    } 
    console.log(result); 
    },