How to retrieve a value inside the setTimeout function with jquery? [closed]

0

I'm trying to retrieve a value inside the setTimeout function to make a calculation plus the result is totally different than I expected.

var aux = '1.056,00';

//Retiro a formatação da moeda.
aux = aux.replace('.', '');
aux = aux.replace(',', '.');

var vlr_unitario = setTimeout(function(){
    aux;
},10);

alert(vlr_unitario);

Can anyone help me? I want to retrieve a value that is within the setTimeout function.

var unitario_aux = ($("#valor_unitario").val() === '') ? 0 : $("#valor_unitario").val(); //Retiro a formatação da moeda do valor_unitario. 
unitario_aux = unitario_aux.replace('.', '');
unitario_aux = unitario_aux.replace(',', '.');
var vlr_unitario = 0;
var idTimeOut = setTimeout(function () {
    vlr_unitario = unitario_aux;
    clearTimeout(idTimeOut);
}, 10);
alert(vlr_unitario);
    
asked by anonymous 30.12.2014 / 17:17

2 answers

2

Just set the value of the variable within the scope of the function.

The return of the setTimeout function is a number, representing the value of the timer ID that has been set.

PS: In your case, since alert is out, it displays the result before the timeout function executes. Note that in the code below the alert was inside the code of the function setTimeout

    var aux = '1.056,00';
    
    //Retiro a formatação da moeda.
    aux = aux.replace('.', '');
    aux = aux.replace(',', '.');
    
    var vlr_unitario = 0;

    setTimeout(function(){
        vlr_unitario = aux;          
        alert(vlr_unitario);
    },10);

  
    
30.12.2014 / 17:33
1

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">
    
30.12.2014 / 19:02