Javascript Local vs Global

Question

I thought I had this mess sorted out in my head but for some odd reason its not working.

If you declare a variable outside of a function / scope and refer to it without the var inside a function then it changes the variable declared previously... right?

however, the first alert returns the correct price, but the second (last) alert returns 0. What am I doing wrong?

//get pricing
var price=0;
var modelid = $("#model_input").val();
var inCode = $("#code_input").val();
$.get("getpricing.php", {  'modelid': modelid ,'code' : inCode }, function(data){
    price = data;
    alert(price);
});
alert(price);

Answer 1

You are using an A jax request.

Those, unkess specified otherwise, are A synchrounous : they are executed in the background, without stopping the execution of the rest of the script.

So, the alert on the last line of code is executed before the Ajax request is finished ; which means price is still 0 at that time.

One way to change that would be to use a synchronous request (see async option ) ; but I strongly advise against it ; quoting the doc :

By default, all requests are sent asynchronous (ie this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

And you definitly don't want your application to freeze the whole browser!

You should re-think the way your application is designed, in this case : you can only use the "price" information after the Ajax request is finished -- which probably means you should place more code inside the function called on its success : just placing code after the $.get is not enough.

Answer 2

使用.get的httprequests是异步的，因此第一个警报（第二个声明的警报）将警告原始值，因为请求的回调尚未触发。