A função setTimeout
é considerada "assíncrona" (lembrando o Thread de outras linguagens) e por isto o que é executado dentro dela está a parte dos demais eventos.
Porém você pode acessar a variável dentro dela, mas as outras funções só poderão acessar depois do "timeout" tiver sido concluído e o evento dentro dele tiver terminado (acaso haja "loops" longos).
Para mais detalhes por favor leia está resposta Qual a vantagem real de usar um CallBack e o que é thread/multithread?
Entendendo o acesso das variáveis
var vlr_unitario;
seja uma variável de "level superior", por exemplo:
//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
pode ter acesso as variáveis em B
e A
B
pode ter acesso as variáveis em A
A
só pode ter acesso as variáveis no "level superior"
variavelglobal
é acessível por todas
setTimeout
Tendo entendido isto, agora irei explicar sobre eventos com "timeout". Estes eventos como setTimeout
e setInterval
são executado a parte, semelhante a eventos assíncronos, quando você chama:
var test = 0;
setTimeout(function() {
test += 1; //Soma mais um
}, 1);
alert(test); //Test irá mostrar "zero"
O resultado é zero, pois o evento foi executado só depois de "um milissegundo", quando é chamado alert(test)
a variável ainda não recebeu o valor e por operar de maneira "assíncrona" o setTimeout
não trava o processo até completar o setTimeout
, como faz o sleep
em outras linguagens.
Note que em linguagens como PHP
temos a função chamada sleep(5);
, ela é diferente de setTimeout
, quando sleep
é executado assim:
echo '1';
sleep(5);
echo '2';
O processo é "travado" até ser concluído o sleep(...);
o 2
não será mostrado, ou seja isto é síncrono.
- Q: É possível fazer "sleep" em JavaScript, mas por que não fazemos?
- R: Por que iria travar o "motor" do navegador e a janela iria congelar (por milissegundos ou segundos)
Essa é "uma" das vantagens do JavaScript, ActionScript e outras linguagens ECMASript, poder trabalhar de maneira "assíncrona". Veja um exemplo "Ajax" é assíncrono, existe "Ajax síncrono", mas isto é um "mal caminho".
Como usar o acesso de variáveis junto ao setTimeout
Se você tiver um código assim (leia os comentários dentro do código):
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;
Ou seja o ultimo alert
não esperou o setTimeout
concluir e por isto exibiu 1
.
A solução
Para conseguir usar "a solução" você terá que trabalhar com "callbacks", para entender leia esta resposta do StackOverflow, após entender, leia o que vem a seguir (só depois que entender mesmo rs):
Suponho que o valor 1.056,00
venha de um <INPUT>
e você queira enviar ele para um <div>
(ou ajax, ou qualquer coisa que receba essa informação), você poderá executar desta maneira:
Nota: eu só usei um DIV como exemplo, você pode usar para ajax ou o que necessitar
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">
setTimeout
.