The function setTimeout
is considered as "asynchronous" (remembering the Thread of other languages) and so what is executed inside it is the part of the other events.
But you can access the variable inside it, but the other functions can only be accessed after the timeout has been completed and the event inside it has ended (perhaps there are long loops).
For more details please read this Answer What is the real advantage of using a CallBack and what is thread / multithread?
Understanding variable access
var vlr_unitario;
is a "top level" variable, for example:
//level global
var variavelglobal;
function A() {
//superior a todos
var variavel_acessivel_em_A_B_C;
var B = function () {
//infeior a "A", mas superior a "C"
var variavel_acessivel_em_B_C;
var C = function () {
//infeior a A e B
var variavel_acessivel_em_C;
};
C();
};
B();
}
-
C
can access variables in B
and A
-
B
can access variables in A
-
A
can only access variables at "top level"
-
variavelglobal
is accessible by all
setTimeout
Having understood this, now I will explain about events with timeout. These events, such as setTimeout
and setInterval
, are executed in part, similar to asynchronous events, when you call:
var test = 0;
setTimeout(function() {
test += 1; //Soma mais um
}, 1);
alert(test); //Test irá mostrar "zero"
The result is zero, since the event was executed only after "one millisecond", when it is called alert(test)
, the variable has not yet received the value and by operating "asynchronously" setTimeout
does not stop the process until it completes setTimeout
, as does sleep
in other languages.
Note that in languages like PHP
we have the function called sleep(5);
, it is different from setTimeout
, when sleep
is executed like this:
echo '1';
sleep(5);
echo '2';
The process is "locked" until it completes sleep(...);
2
will not be shown, ie this is synchronous.
-
Q: You can "sleep" in JavaScript, but why not?
-
R: Why would the browser "engine" crash and the window would freeze (by milliseconds or seconds)
This is "one" of the advantages of JavaScript, ActionScript and other languages ECMASript , being able to work "asynchronously" . See an example "Ajax" is asynchronous, there is "Ajax synchronous", but this is a "bad way".
How to use variable access next to setTimeout
If you have such a code (read the comments inside the code):
function main() {
var variavel = 1;
//Espera um segundo
setTimeout(function () {
variavel += 1;
}, 1000);
//Espera dois segundos
setTimeout(function () {
//Mostra "2"; pois esperou mais que o tempo do outro setTimeout
alert(variavel);
}, 1000);
//mostra "1" pois não houve espera
alert(variavel);
}
window.onload = main;
In other words, the last alert
did not expect the setTimeout
to complete and therefore displayed 1
.
The solution
In order to use "the solution" you will have to work with "callbacks", to understand read this response from StackOverflow , after understanding, read the following (only after you understand rs):
I assume that the 1.056,00
value comes from a <INPUT>
and you want to send it to a <div>
(or ajax, or anything that receives this information), you can do this:
Note: I just used a DIV as an example, you can use it for ajax or whatever you need
var elementoInput = document.getElementById("MEU_INPUT");
var elementoDiv = document.getElementById("MEU_DIV");
var botaoTest = document.getElementById("TEST");
var vlr_unitario;
function atualizarDiv() {
elementoDiv.innerHTML = vlr_unitario;
}
function transformarEmDecimal() {
var aux = elementoInput.value;//Pega o valor
//Retiro a formatação da moeda.
aux = aux.replace('.', '');
aux = aux.replace(',', '.');
elementoDiv.innerHTML = "Carregando...";
setTimeout(function(){
vlr_unitario = aux;
//Chama a função
atualizarDiv();
}, 1000);
}
botaoTest.onclick = transformarEmDecimal;
<input id="MEU_INPUT" type="text" value="1.056,00">
<div id="MEU_DIV">vazio</div>
<input id="TEST" type="button" value="Testar">