Глобальная переменная: не передается новое значение через функцию
 

Доброго времени суток!

Почему не меняется значение глобальной переменной costCalculator в коде ниже?

Код:

var costCalculator = "initial"; // Определяем и задаем значение глобальной переменной

$(function (){

    $.ajax({
       beforeSend: function(xhr){
           if (xhr.overrideMimeType){
               xhr.overrideMimeType('application/json');
           }
       }
    });

    function loadCostCalculator(){
        $.getJSON('data/test.json')
            .done( function(data){
                costCalculator = data; // Проблема где-то в этом месте
                $('#calcBody').html('Success! Калькулятор загружен'); // Выводит это сообщение
            }).fail( function(){
                $('#calcBody').html('Failure! В настоящий момент мы не можем загрузить калькулятор');
            });
    }

    loadCostCalculator();

    alert(costCalculator); // Выводит первоначальное значение "initial"

});

var costCalculator = "initial"; // Определяем и задаем значение глобальной переменной

$(function (){

    $.ajax({
       beforeSend: function(xhr){
           if (xhr.overrideMimeType){
               xhr.overrideMimeType('application/json');
           }
       }
    });

    function loadCostCalculator(){
        $.getJSON('data/test.json')
            .done( function(data){
                var costCalculator = data; // Проблема где-то в этом месте
                $('#calcBody').html('Success! Калькулятор загружен'); // Выводит это сообщение
            }).fail( function(){
                $('#calcBody').html('Failure! В настоящий момент мы не можем загрузить калькулятор');
            });
    }

    loadCostCalculator();

    alert(costCalculator); // Выводит первоначальное значение "initial"

});

поменял строку "costCalculator = data;" на "var costCalculator = data;"
должно работать
если объект создавался при помощи var - то значит и при помощи var он изменяется

PPS: ИЗВИНЯЮСЬ, У МЕНЯ СЛУЧИЛАСЬ ОШИБОЧКА, ПРОБЛЕМА НЕ В ЭТОМ!!!

armidoll,
прочитай про AJAX. Твой алерт выводит переменную до того, как у неё изменится значение.

<script src='http://code.jquery.com/jquery-2.1.4.js'></script>

<script type="text/javascript">
var costCalculator = "initial"; // Определяем и задаем значение глобальной переменной

$(function (){

    $.ajax({
       beforeSend: function(xhr){
           if (xhr.overrideMimeType){
               xhr.overrideMimeType('application/json');
           }
       }
    });

    function loadCostCalculator(){
        $.getJSON('test.json')
            .done(function(data){
                alert('до' + costCalculator);
                costCalculator = data;
                alert('после' + costCalculator);
                $('#calcBody').html('Success! Калькулятор загружен'); // Выводит это сообщение
            }).fail( function(){
                $('#calcBody').html('Failure! В настоящий момент мы не можем загрузить калькулятор');
            });
    }

    loadCostCalculator();

});

</script>

PS: пришлось на скорую руку розбираться в синтаксисе JQuery(раньше практически не работал с ним), немного посмотрел и понял - лучше уже писать на чистом JavaScript и полифилах чем на JQuery

Safort, спасибо.
Я так понял, что alert() выполнился раньше, чем выстрелил .done() для $.getJSON() ?

KosBeg,
тоже спасибо, мне скорее было интересно "почему", а не "как"

armidoll,
Да.

Делается наоборот. Вы пишите на js свои решения, а кому надо тот переводит на свой язык.

Не раньше и не позже, а просто все мгновенно выполнилось и уперлось в алерт.

Потому что проверять надо не алертами, а логами. В консоль валить, хотя и там бывают лаги. Алерты вас могут вообще запутать. Например пока вы тянетесь к кнопке ОК - ответ с сервера уже пришел, но ничего не происходит пока модальный диалог не закроется. Вы его закрываете - бамц все сработало. Типа вот что алерт животворящий делает.