JavaScript does not follow in algorithm flow

Question

JavaScript does not follow in algorithm flow

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

Example:

$("#segundaFeira").change(function(){
        valorSegundaFeira = calcularJornadaDeTrabalho(this.value);
        var x = valorFinalJornadaTrabalho();
        alert(x);
});

Note that the global variable valorSegundaFeira is defined by a function that returns a value. so the problem that when I call change is printing the alert(x) first and then enter the calcularJornadaDeTrabalho function and set the valorSegundaFeira value. I do not know why you're not following the structured algorithm.

HTML Code

<select class="form-control" th:field="*{segundaFeira}" >
                option value="" selected="selected">--</option>
                <option th:each="horario : ${listaHorarioTrabalhoDiario}" th:value="${horario.id}"
                                            th:text="${horario.descricao}">horario</option>
</select>

CalculateWorking function

function calcularJornadaDeTrabalho(value){
        var **= 440;
        var **= 528;
        var **= 480;
        var **= 540;
        var **= 480;
        var **= 240;
        var **= 360;
        var valorTotal = 0;
        var **= 0;

        $.get(urlJornadaTrabalho, {idHorario: value}).done(function (horario) {
            **= horario.**; 
            if (**== '**') {
                valorTotal = **;
            }
            if (**== '**') {
                valorTotal = **;
            }
            if (**== '**') {
                valorTotal = **;
            }
            if (**== '**') {
                valorTotal = **;
            }
            if (**== '**') {
                valorTotal = **;
            }
            if (**== '**') {
                valorTotal = **;
            }
            if (**== '**') {
                valorTotal = **;
            }
            alert("vlrTotal " + valorTotal);
        }).fail(function(xhr) {
            console.log("erro ao fazer ajax na urlJornadaTrabalho");
        });
        return valorTotal;
    }

javascript java jquery html5 css

asked by anonymous 05.11.2015 / 13:39

3 answers

Enable and disable JButton Bootstrap: prevent the menu from closing when clicked off it

score 2 · Answer 1

The response from @flpms already answers the reason why this does not work, you are working with promises and before waiting for the return of the request and the promise is solved you already return the variaval that is still without the value of the calculation. / p>

Try the following solution:

$("#segundaFeira").change(function() {
  calcularJornadaDeTrabalho(this.value).done(function(varloRetornadoPromise) {
    valorSegundaFeira = varloRetornadoPromise;
    var x = valorFinalJornadaTrabalho();
    alert(x);
  }).fail(function(error) {
    console.dir(error);
  });

});

function calcularJornadaDeTrabalho(value) {
  var * *= 440;
  var * *= 528;
  var * *= 480;
  var * *= 540;
  var * *= 480;
  var * *= 240;
  var * *= 360;
  var valorTotal = 0;
  var * *= 0;

  return $.get(urlJornadaTrabalho, {
    idHorario: value
  }).done(function(horario) { * *= horario.* * ;
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }

    return valorTotal;
  }).fail(function(xhr) {
    return "erro ao fazer ajax na urlJornadaTrabalho";
  });

}

I recommend a little study on promises and their implementations in javascript so you can fully understand the flow of the above code.

score 1 · Answer 2

Your problem is in the asynchronous part of Javascript.

When the change event occurs, the calcularJornadaDeTrabalho function did not complete the execution. Then the variable valorSegundaFeira is undefined .

Suggestion is that you correct the global scope execution and in the callback of the change event you call the action that fills the valorSegundaFeira variable with the information you want.

You can pass the valorFinalJornadaTrabalho function as callback, at the end of the calcularJornadaDeTrabalho call. The call would look like this:

calcularJornadaDeTrabalho(value, valorFinalJornadaTrabalho) {
    //Após o sucesso do AJAX
    valorFinalJornadaTrabalho(valores);
}

Javascript is different from other languages, it does not have a step-by-step execution, it can execute an AJAX while you do not even have the answer perform the sum of the values. So to ensure step-by-step execution you use the callback, the action that should be called after the end of the previous run.

score 0 · Answer 3

Your GET call is running synchronously and until you have succeeded the subsequent functions have already been executed.

I suggest you use the GET call as follows (async false):

$.ajax({
    url : urlJornadaTrabalho,
    type : "get",
    async: false,
    data: {idHorario: value},
    success : function(horario) {
        * *= horario.* * ;
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }
    if ( * *= = '**') {
      valorTotal = * * ;
    }

    return valorTotal;
    },
    error: function() {
       return "erro ao fazer ajax na urlJornadaTrabalho";
    }
 });