1

Tenho esse método:

var getCardToken = function () {
    var passa = true;
    var code = false;
    var acardNumber= $("#ContentPlaceHolder1_txtNmCartao").val();
    var acvv=  $("#ContentPlaceHolder1_txtCodigoDeSeguranca").val();
    var aexpirationMonth= $("#ContentPlaceHolder1_cmbMesCartao").val();
    var expirationYear = $("#ContentPlaceHolder1_cmbAnoCartao").val();
    var naoTitular = $("#ContentPlaceHolder1_chkNaoTitular")[0].checked;
    var cpfTitular = $("#ContentPlaceHolder1_txtCpfTitular").val();
    var foneTitular = $("#ContentPlaceHolder1_txtFoneTitular").val();
    var dataNascimento = $("#ContentPlaceHolder1_txtDataNascimento").val();

    if (!naoTitular) { // se for o titular do cartao quem esta efetuando a compra

        if (acardNumber == "" && acardNumber != null) {
            passa = false;

        };

        if (acvv == "" && acvv != null) {
            passa = false;

        };

        if (aexpirationMonth == "Mês" && aexpirationMonth != null) {
            passa = false;
        };


        if (expirationYear == "Ano" && expirationYear != null) {
            passa = false;
        };


    } else { // se nao for o titular do cartao devemos olhar outros campos.


        if (cpfTitular == "" && cpfTitular != null) {
            passa = false;

        };

        if (foneTitular == "Mês" && foneTitular != null) {
            passa = false;
        };


        if (dataNascimento == "Ano" && dataNascimento != null) {
            passa = false;
        };

    }

    if (passa) {

        //se os dados estao preenchidos corretamente

        PagSeguroDirectPayment.createCardToken({

            cardNumber: $("#ContentPlaceHolder1_txtNmCartao").val(),
            cvv: $("#ContentPlaceHolder1_txtCodigoDeSeguranca").val(),
            expirationMonth: $("#ContentPlaceHolder1_cmbMesCartao").val(),
            expirationYear: $("#ContentPlaceHolder1_cmbAnoCartao").val(),
            success: function (response) {
                //token gerado, esse deve ser usado na chamada da API do Checkout Transparente
                $("#ContentPlaceHolder1_hideTcc").val(response.card.token);
               console.log($("#ContentPlaceHolder1_hideTcc").val());
                code = true;

            },
            error: function (response) {
                console.error(response);
                alert("Ocorreu um erro ao verificar os dados do cartão, por favor atualize a pagina e tente novamente!");
                code = false;

            },
            complete: function (response) {

            }

        });


    };
    return code;
};

a chamada para ele ocorre assim:

<asp:button ID="cmdAvancarEndereco" runat="server" cssclass="btn btn-success btn-lg" OnClientClick="return getCardToken();"  text="Avançar >"></asp:button>

me deram a dica que se eu colocar assim : OnClientClick="return getCardToken();" o Code-Behind só é executado se o retorno da function JS for true

Porem o que esta acontecendo e que a function executa ate o final, retorna false, e depois volta pra este ponto (como se executasse duas vezes):

PagSeguroDirectPayment.createCardToken({

            cardNumber: $("#ContentPlaceHolder1_txtNmCartao").val(),
            cvv: $("#ContentPlaceHolder1_txtCodigoDeSeguranca").val(),
            expirationMonth: $("#ContentPlaceHolder1_cmbMesCartao").val(),
            expirationYear: $("#ContentPlaceHolder1_cmbAnoCartao").val(),
            success: function (response) {
                //token gerado, esse deve ser usado na chamada da API do Checkout Transparente
                $("#ContentPlaceHolder1_hideTcc").val(response.card.token);
               console.log($("#ContentPlaceHolder1_hideTcc").val());
                code = true;

            },
            error: function (response) {
                console.error(response);
                alert("Ocorreu um erro ao verificar os dados do cartão, por favor atualize a pagina e tente novamente!");
                code = false;

            },
            complete: function (response) {

            }

        });

esses métodos sao functions de callback, o problema e que eu só poderia retornar algum valor (true/false) depois de executar as functions de callback que é la que e definido se vai ou nao para o codebehind.

Esse é o comportamento normal? Existe uma forma de executar esse callback antes de retornar a function?

2 Respostas 2

1

Na verdade o que acontece é o seguinte: O que o pagseguro esta fazendo "por baixo dos panos" é uma requisição ajax, ajax é asincrono, ou seja, demora um pouco para completar, e se o javascript fosse esperar ate a requisição ser completada seu navegador ficaria "congelado" enquanto processa a requisição.

Por isso usamos callbacks, que basicamente é uma função que é executada quando a requisição termina, isso envolve sucesso, erro ou dois.

Quando chega no ponto onde tem return code; o a requisição ainda não terminou, voce ainda não teve resposta do servidor, assim que termina o código/função de success ou error é executada, por isso você tem essa impressão de "voltar naquele ponto".

Grosseiramente falando é como se tivesse agendado a função para ser executada mais tarde.

2
  • Entendi cara... eu imaginei qeu seria isso por causa do callback, e nao existe nenhuma possibilidade de travar o processamento para receber o retorno desse callback ? 14/02/2017 às 17:15
  • que eu saiba nao 14/02/2017 às 17:20
1

São as esquizitices de JS... esse codigo java script exacuta tudo "ao mesmo tempo" entao ele executa o codigo erro: e complete:

vc tem que passar o erro como um parametro da funcao

createCardToken({jsonstuf}, function(err, result){.....

if (err) {console.error(<erros, mensagens..>)....

O que você procura acredito que seja algo mais ou menos nesse formato:

document.querySelector('form').onsubmit = formSubmit

function formSubmit (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}

function postResponse (err, response, body) {
  var statusMessage = document.querySelector('.status')
  if (err) return statusMessage.value = err
  statusMessage.value = body
}

Essa é uma referencia do site http://callbackhell.com/ Caso eu consiga escrever alguma coisa melhor que faça mais sentido eu posto denovo.

5
  • O problema, nao e que esta dando erro, e sim que tipo, ele passa o função de callback sem executar ela tipo parece que ele le mas nao executa ai depois que ele chega no final da função onde tem o codigo return code; ai ele volta pro callback do pag 14/02/2017 às 15:12
  • Como eu vinha dizendo... javascript é uma linguagem estranha.... pra fazer isso vc tem que sair aninhando callbacks.
    – fils capo
    16/02/2017 às 4:34
  • bom vou editar um pouco a resposta para ver se ajuda... pelo que eu entendi vc quer que uma funcao crie valores de um token de cartao.. certo?
    – fils capo
    16/02/2017 às 4:50
  • Experimente colocar 'async: false, ' na sua função AJAX, vai acontecer o que o @Neuber Oliveira falou, mas você vai poder analisar melhor o retorno da chamada antes do callback!
    – Rodrigo
    16/02/2017 às 6:12
  • Então, o problema é que não sou eu quem executo o ajax, eu nem tenho acesso a função ela vem de uma lib em JS que o próprio PagSeguro oferece.. a unica coisa que eu possa fazer e passar os parâmetros que ele me pede (número do cartão, data de validade, cvv), e os métodos de callback.. 16/02/2017 às 13:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .