Назначение скрытой переменной в функции внутри функции

Question

У меня есть javascript-код, похожий на следующий, однако, когда я пытаюсь использовать 'myVar' внутри foo(), его значение не определено. Я также попытался передать переменную в bar() и назначить ее напрямую, но не пройдя по ссылке.

function foo() { 
    bar(); 
    var myVar = document.getElementById('coords').value; 
    // myVar should now be (40.7143528, -74.0059731) 
    alert(myVar); // returns blank 

    var request = { 
    location: myVar, 
    radius: 500, 
    types: [type] //previously defined 
    }; 

    //Then send a search request to Google... 
} 

function bar() { 
    geocoder.geocode({'address':address}, function(results, status) { 

     document.getElementById('coords').value = results[0].geometry.location; 
     // Let's say the location is NYC (40.7143528, -74.0059731) 

    alert(document.getElementById('coords').value); //returns the correct value 
    // however, this pops up after the pop up in function foo() 

    }); 
} 

со следующим HTML

<input type="hidden" id="coords" name="coords"/> 

Реальный код использует API Карт Google, если это делает разницу:

Answer 1

bar работает асинхронно, потому что geocoder делает. Это означает, что

document.getElementById('coords').value = results[0].geometry.location; 

фактически выполняет после

var myVar = document.getElementById('coords').value; 

Вы не можете использовать Ajax таким образом. Вся ваша работа, которая зависит от results/status, должна выполняться в обратном вызове.

Answer 2

jsfiddle Demo

прекрасно работает для меня. Убедитесь, что при определении своих функций на самом деле используйте function перед определением.

function foo() { 
bar(); 
var myVar = document.getElementById('coords').value; 
} 

function bar() { 
document.getElementById('coords').value = 4; 
} 

foo();