Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Para desabilitar o botão depois de inserir a API

Fiquei intrigada com o que o colega Jonas apontou: "Quando criamos o botão Buscar Pacientes, não foi validado que só pode apertar uma vez o botão. Se ficarmos seguidamente apertando, ele vai ficar adicionando os mesmo pacientes várias e várias vezes."

Uma das formas para resolver esse problema seria desabilitar o botão depois de inserir a api. A tentativa que fiz ficou com o seguinte código e funcionou...

   xhr.addEventListener("load", function() {
        var erroAjax = document.querySelector("#erro-ajax");

        if (xhr.status == 200) {
            var resposta = xhr.responseText;
            var pacientes = JSON.parse(resposta);

            pacientes.forEach(function(paciente) {
                adicionaPacienteNaTabela(paciente);
            });
            botaoAdicionar.setAttribute("disabled", true);
        } else {
            erroAjax.classList.remove("invisivel");
        }
    });

    xhr.send();
3 respostas

Fala aí Jessica, tudo bem? Que legal, parabéns pela solução para o problema, muito bom.

Uma outra possível solução seria você aplicar o padrão debouce, a ideia é sempre agendar a execução de uma função daqui X tempo e caso o usuário cliquei no botão novamente, ele irá cancelar o agendamento e re-agendar daqui mais X tempo.

Dessa maneira a função só será executado quando houver um intervalo entre os clicks.

É uma solução e padrão bem comum para esse tipo de problema.

Espero ter ajudado, bons estudos.

Que legal! Não conhecia esse padrão "debouce", vou fazer a tentativa.

Obrigada pela resposta.

solução!

Magina, sempre que precisar não deixe de criar suas dúvidas.

Obs: Caso a dúvida tenha sido solucionada, consegue marcá-la como concluída?

Abraços e bons estudos.