Ajax await end of request

Question

I’m using the script below to feed some fields in a form.

When doing a badge search, it takes a few seconds to find the value, but if the person gives a "enter", he passes the "Searching..." values to all fields in the bank. What can I do for the system to give a "lock" while not returning the value found in the bank?

Code

/**
  * Função para criar um objeto XMLHTTPRequest
  */
 function CriaRequest() {
     try{
         request = new XMLHttpRequest();
     }catch (IEAtual){

         try{
             request = new ActiveXObject("Msxml2.XMLHTTP");
         }catch(IEAntigo){

             try{
                 request = new ActiveXObject("Microsoft.XMLHTTP");
             }catch(falha){
                 request = false;
             }
         }
     }

     if (!request)
         alert("Seu Navegador não suporta Ajax!");
     else
         return request;
 }

 /**
  * Função para enviar os dados
  */
 function getDados() {

     // Declaração de Variáveis
     /* Caso for necessário passar mais parametros além do nome
      * basta adicionar uma variável aqui e editar no GET
      */
     var nome   = document.getElementById("cracha").value; //CAMPO QUE VEM DO INDEX.PHP
     var result = document.getElementById("content"); //DIV DE RETORNO DOS DADOS
     var xmlreq = CriaRequest();

     // Exibe a mensagem de progresso
     //result.innerHTML = '<img src="images/Progresso.gif"/>';
     document.getElementById("nomefunc").value = 'Pesquisando...';
     document.getElementById("entrada1").value = 'Pesquisando...';
     document.getElementById("saida1").value = 'Pesquisando...';
     document.getElementById("entrada2").value = 'Pesquisando...';
     document.getElementById("saida2").value = 'Pesquisando...';
     document.getElementById("entrada3").value = 'Pesquisando...';
     document.getElementById("saida3").value = 'Pesquisando...';

     // Iniciar uma requisição
     // Se for colocar mais variáveis, é aqui. Exemplo: processa.php?txtnome=" + nome + '&admissao=' + admissao
     xmlreq.open("GET", "processa.php?cracha=" + nome, true);

    // Atribui uma função para ser executada sempre que houver uma mudança de estado
     xmlreq.onreadystatechange = function(){

         // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
         if (xmlreq.readyState == 4) {

             // Verifica se o arquivo foi encontrado com sucesso
             if (xmlreq.status == 200) {
                 if (xmlreq.responseText == "") {
                      document.getElementById("cracha").focus();
                      document.getElementById("cracha").value = '';
                      document.getElementById("nomefunc").value = 'NÃO ENCONTRADO!';
                      document.getElementById("entrada1").value = 'NÃO ENCONTRADO!';
                      document.getElementById("saida1").value = 'NÃO ENCONTRADO!';
                      document.getElementById("entrada2").value = 'NÃO ENCONTRADO!';
                      document.getElementById("saida2").value = 'NÃO ENCONTRADO!';
                      document.getElementById("entrada3").value = 'NÃO ENCONTRADO!';
                      document.getElementById("saida3").value = 'NÃO ENCONTRADO!';

                 }else{

                   //Aqui recebe os dados do processa.php, abre e aplica nos campos desejados
                   var dados = JSON.parse(xmlreq.responseText);
                   document.getElementById("nomefunc").value = dados.nome;
                   document.getElementById("entrada1").value = dados.entrada1;
                   document.getElementById("saida1").value = dados.saida1;
                   document.getElementById("entrada2").value = dados.entrada2;
                   document.getElementById("saida2").value = dados.saida2;
                   document.getElementById("entrada3").value = dados.entrada3;
                   document.getElementById("saida3").value = dados.saida3;
                 }
             }else{
                 result.innerHTML = "Erro: " + xmlreq.statusText;
             }
         }
     };
     xmlreq.send(null);
 }

Answer 1

I suggest you create a flag to see if there is an active ajax call and avoid other requests during that period. Each time getDados() be called, if requestActive der true it cancels the function call. If requestActive der false he raises the flag to true and make the call.

Here’s a code hint, plus DRY because you have a lot of repeat code...

var requestActive = false;
function getDados() {
    if (requestActive) return;
    requestActive = true;
    // Declaração de Variáveis
    /* Caso for necessário passar mais parametros além do nome
     * basta adicionar uma variável aqui e editar no GET
     */
    var ids = ["nomefunc", "entrada1", "saida1", "entrada2", "saida2", "entrada3", "saida3"];
    var nome = document.getElementById("cracha").value; //CAMPO QUE VEM DO INDEX.PHP
    var result = document.getElementById("content"); //DIV DE RETORNO DOS DADOS
    var xmlreq = CriaRequest();

    // Exibe a mensagem de progresso
    //result.innerHTML = '<img src="images/Progresso.gif"/>';
    ids.forEach(function (id) {
        document.getElementById(id).value = 'Pesquisando...';
    });

    // Iniciar uma requisição
    // Se for colocar mais variáveis, é aqui. Exemplo: processa.php?txtnome=" + nome + '&admissao=' + admissao
    xmlreq.open("GET", "processa.php?cracha=" + nome, true);

    // Atribui uma função para ser executada sempre que houver uma mudança de estado
    xmlreq.onreadystatechange = function () {

        // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
        if (xmlreq.readyState == 4) {

            // Verifica se o arquivo foi encontrado com sucesso
            if (xmlreq.status == 200) {
                if (xmlreq.responseText == "") {
                    document.getElementById("cracha").focus();
                    document.getElementById("cracha").value = '';
                    ids.forEach(function (id) {
                        document.getElementById(id).value = 'NÃO ENCONTRADO!';
                    });

                } else {

                    //Aqui recebe os dados do processa.php, abre e aplica nos campos desejados
                    var dados = JSON.parse(xmlreq.responseText);
                    dados.nomefunc = dados.nome; // se puderes corrige isto no servidor para não ter de fazer isto aqui e as chaves do objeto retornado serem iguais às IDs
                    ids.forEach(function (id) {
                        document.getElementById(id).value = dados[id];
                    });
                }
            } else {
                result.innerHTML = "Erro: " + xmlreq.statusText;
            }
        }
        requestActive = false;
    };
    xmlreq.send(null);
}