1

Como melhorar este script?

A função copiaArea() deve pegar o primeiro retorno do array e enviar para a área de transferência do windows, detalhe: Estou desenvolvendo para IE, funciona exclusivamente nele esta função. Porém a var global numero, não recebe a tempo na 2ª chamada da listaNumeros(), após o adicionarNúmero()(gerado por trigger no BD, por motivos de tratamento de data e sequência de numeração direto no mysql.).

A questão é a seguinte, as contra-indicações de utilizar o async:false no ajax são pertinentes aqui?

Outro detalhe, é que isto só roda em servidor de rede local, não depende da internet.

/*
* Loader da numeração
* @author marcelo aymone
*/

$(document).ajaxStart(function() {
    $('#loading').show();
});

$(document).ajaxStop(function() {
    $('#loading').hide();
});

var ip;
var numero;

function inserirLinha(array) {
    var linha = $("<tr>");
    var col = "";
    col += "<td>" + array.num + "</td>";
    col += "<td>" + array.time + "</td>";
    linha.append(col);
    if (array.ip == ip) {
        linha.toggleClass("info");
    }
    $("#numeros").append(linha);
}

function sysMsg(msg) {
    $("#alertas").empty().append(msg);
}

function copiaArea(txt) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', txt);
    }
}

function atualizaTabela(data) {
    var msg = "";
    if (data.status) {
        msg = "<div class=\"alert alert-success text-center\">";
        msg += "<h4>Sucesso!</h4>";
        msg += "Seu número foi gerado com sucesso!";
        msg += "</div>";
    } else {
        msg = "<div class=\"alert alert-error\">";
        msg += "<h4>Sucesso!</h4>";
        msg += "Ocorreu um erro e não foi possível gerar um número.";
        msg += "</div>";
    }
    $("#numeros").empty();
    listarNumeros();
    sysMsg(msg);
}

/*
* ListarNumeros recebe o seguinte json:
* {"lista":[{"num":"2014\/1618","ip":"10.120.2.35","time":"15\/05\/2014"}],"cliente":"10.120.2.35"}
**Possui \/ por causa do json_encode(), mas funciona ok.
*/

function listarNumeros() {
    $.ajaxSetup({cache: false, async:false});
    $.getJSON("/intracake/Numeros/listar.json")
            .done(function(data) {
                ip = data.cliente;
                numero = data.lista[0].num; //Pega o 1 resultado do array, último num gerado.
                $.each(data.lista, function(index, array) {
                    inserirLinha(array);
                });
            });
}
/*
* Recebe como retorno do json: {"status":true}
*/
function adicionarNumero() {
    $.post("/intracake/Numeros/adicionar.json")
            .done(function(data) {
                atualizaTabela(data);
                copiaArea(numero);
            });
}

$(document).ready(function() {
    listarNumeros();
});

Script Html+php (cakephp):

<?php
 echo $this->Html->script('numeros-run', array('inline' => false));
?>
<style>
    .centralizado {
        margin: 0 auto !important;
        float: none !important;
    }
    .table td, .table th {
        text-align: center;   
    }
</style>

<div class="span10">
    <div id="alertas"></div>
    <p class="text-center"><button class="btn btn-large btn-primary" type="button" onclick="adicionarNumero();">Gerar número!</button></p>
    <div id="loading" class="text-center"><p><img src="img/ajax-loader.gif"></p></div>
    <p class="text-center lead">Últimos números gerados:</p>
    <div class="span4 centralizado">
        <table id="numeros" class="table table-bordered">
        </table>
    </div>
    <p class="text-center">
        <i class="icon-info-sign"></i>
        Todos números gerados pelo seu ip, 
        aparecem destacados em azul.
    </p>
    <p class="text-center">
        <i class="icon-info-sign"></i>
        Ao gerar um número, ele é enviado para a área de transferência do windows.<br>
        <i class="icon-info-sign"></i>
        Compatível apenas com Microsoft Internet Explorer.<br>
        <strong class="text-error">Você precisa aceitar na janela que abrirá</strong>, para que o número possa ser copiado automaticamente.<br>
        Depois basta você colar("ctrl+v") em qualquer lugar.
    </p>
</div>
16
  • 1
    Sim, pode travar tudo. O que você precisa é de um esquema de sincronismo (criado por você, e não pelo jQuery) utilizando uma variável global, por exemplo var estado = 0; Quando você chamar uma das duas funções, some 1 à variável, e chame uma terceira função executaFim(). Dentro de executaFim(), você valida se estado vale 2. Se sim, execute seu código que depende das duas outras funções terem executado. Caso contrário, não faça nada. Commented 15/05/2014 às 15:09
  • @carlosrafaelgn, isso não dá no mesmo? porque se colocar uma condição que permita não executar nada, é o mesmo resultado do ajax não possuir retorno e manter a página estática. Commented 15/05/2014 às 15:13
  • 1
    Não, não dá na mesma, não. Porque, apesar de "não fazer nada", pelo menos não travou a tela do usuário, enquanto a resposta não chega ;) Commented 15/05/2014 às 15:15
  • Entendi... Mas não quero fazer isto de modo que parece uma gambiarra, gostaria de ajustar no padrão de pilha de execução de callback's. Commented 15/05/2014 às 15:19
  • Se eu adicionar a callback .fail({return false;}) como callback da própria requisição ajax, não irá "destravar" a página e continuar a execução? Commented 15/05/2014 às 15:21

2 Respostas 2

5

Se entendi corretamente, o fluxo do código postado, com o uso de ajax assíncrono, é o seguinte:

  1. Botão clicado, adicionarNumero é chamado.
  2. JSON (adicionar.json) recebido, atualizaTabela é chamado.
  3. atualizaTabela chama listarNumeros.
  4. copiaArea é chamado, passando o valor anterior de numero pois a resposta do listar.json ainda não chegou.
  5. Chega a resposta do listar.json e a global numero é atualizada (tarde demais!)

Solução

Considerando que você não quer chamar copiaArea sempre que listarNumeros for executada, e sim somente após o adicionarNumero, sugiro tirar proveito das promises retornadas pelos métodos de ajax do jQuery, assim:

function atualizaTabela(data) {
    var msg = "";
    if (data.status) {
        msg = "<div class=\"alert alert-success text-center\">";
        msg += "<h4>Sucesso!</h4>";
        msg += "Seu número foi gerado com sucesso!";
        msg += "</div>";
    } else {
        msg = "<div class=\"alert alert-error\">";
        msg += "<h4>Sucesso!</h4>";
        msg += "Ocorreu um erro e não foi possível gerar um número.";
        msg += "</div>";
    }
    $("#numeros").empty();
    return listarNumeros();
    sysMsg(msg);
}

function listarNumeros() {
    $.ajaxSetup({cache: false, async:false});
    return $.getJSON("/intracake/Numeros/listar.json").done(function(data) {
        ip = data.cliente;
        numero = data.lista[0].num; //Pega o 1 resultado do array, último num gerado.
        $.each(data.lista, function(index, array) {
            inserirLinha(array);
        });
    });
}

function adicionarNumero() {
    $.post("/intracake/Numeros/adicionar.json").done(function(data) {
        atualizaTabela(data).done(function(){
            copiaArea(numero);
        });
    });
}

Nota: a solução abaixo foi proposta quando um dos requisitos não estava claro para mim

Me parece que para resolver o problema seria suficiente retirar a chamada de copiaArea da função adicionarNumero, e passar para listarNumeros. Com isso, você pode inclusive se livrar da variável global (sobre isso, ver Por que usar variáveis globais não é uma boa prática?). Ou seja:

function listarNumeros() {
    $.ajaxSetup({cache: false, async:false});
    $.getJSON("/intracake/Numeros/listar.json")
            .done(function(data) {
                ip = data.cliente;
                // remover a linha abaixo
                //numero = data.lista[0].num; //Pega o 1 resultado do array, último num gerado.

                // inserir a seguinte linha:
                copiaArea(data.lista[0].num);

                $.each(data.lista, function(index, array) {
                    inserirLinha(array);
                });
            });
}

function adicionarNumero() {
    $.post("/intracake/Numeros/adicionar.json")
            .done(function(data) {
                atualizaTabela(data);
                // remover a linha abaixo
                //copiaArea(numero);
            });
}
14
  • Você é ninja. Não é a primeira vez que você me ajuda aqui no stack... vou testar e já respondo. Commented 15/05/2014 às 17:26
  • 1
    Se entendi bem a pergunta, não era para fazer a cópia apenas na segunda vez que a função listarNumeros() fosse chamada? Commented 15/05/2014 às 17:30
  • @carlosrafaelgn Xi, aí não sei, vamos esperar o autor esclarecer isso.
    – bfavaretto
    Commented 15/05/2014 às 17:31
  • @MarceloAymone Obrigado pelo elogio, mas não foi nada ninja chegar até essa resposta :) Tive de focar um tempo no seu código até entender esse fluxo...
    – bfavaretto
    Commented 15/05/2014 às 17:36
  • 1
    Dê uma olhada no meu fiddle, @MarceloAymone, e veja se era isso (as linhas marcadas com @@@ foram as que criei): jsfiddle.net/USnmL/1 Commented 15/05/2014 às 17:44
3

Você pode utilizar um contador global e uma guard condition para sincronizar a execução das suas ações assíncronas. Mais ou menos como é feito em uma Máquina de Estados.

No seu código, isso ficaria assim (apenas as modificações):

Trecho 1:

var estado = 0;

function executaFim() {
    if (estado >= 3)
        copiaArea(numero);
}

Trecho 2:

function listarNumeros() {
    $.ajaxSetup({cache: false, async:false});
    $.getJSON("/intracake/Numeros/listar.json")
            .done(function(data) {
                // seu código original
                estado++;
                executaFim();
            });
}

Trecho 3:

function adicionarNumero() {
    $.post("/intracake/Numeros/adicionar.json")
            .done(function(data) {
                // seu código original
                estado++;
                executaFim();
            });
}

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 .