2

Tenho o seguinte código que utilizo para enviar os dados do formulário para o arquivo PHP.

function loginRequest() {

 // Declaração de Variáveis
 var usuario   = document.getElementById("txtusuario").value;
 var senha   = document.getElementById("txtsenha").value;
 var result = document.getElementById("resultado");
 var xmlreq = CriaRequest();

 // Exibi a imagem de progresso
 result.innerHTML = '<img id="loading-icon" src="./images/eclipse.gif"/>';

 // Iniciar uma requisição
 xmlreq.open("GET", "./controllers/controller.php?txtusuario=" + usuario + "&txtsenha=" + senha, true);

 // Atribui uma função para ser executada sempre que houver uma mudança de ado
 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) {
             result.innerHTML = xmlreq.responseText;
         }else{
             result.innerHTML = "Erro: " + xmlreq.statusText;
         }
     }
 };
 xmlreq.send(null);
}

Gostaria de aumentar o tempo de exibição do loading e saber como eu posso fazer isso.

4
  • Como assim? Pra quanto tempo?
    – Meu ovo
    30/12/2017 às 0:03
  • Eu gostaria de fazer o loading aparecer em tela por 3 segundos por exemplo. 30/12/2017 às 0:06
  • Mas antes da requisição ou depois?
    – Meu ovo
    30/12/2017 às 0:06
  • Antes da requisição. 30/12/2017 às 0:08

2 Respostas 2

2

Você pode usar setTimeout com callback para atrasar o tempo da requisição. Veja que criei uma variável delay onde você pode colocar um valor em segundos:

function loginRequest() {

   // Declaração de Variáveis

   var delay = 3; // tempo em segundos

   var usuario   = document.getElementById("txtusuario").value;
   var senha   = document.getElementById("txtsenha").value;
   var result = document.getElementById("resultado");
   var xmlreq = CriaRequest();

   // Exibi a imagem de progresso
   result.innerHTML = '<img id="loading-icon" src="./images/eclipse.gif"/>';

   setTimeout(function(){
      // Iniciar uma requisição
      xmlreq.open("GET", "./controllers/controller.php?txtusuario=" + usuario + "&txtsenha=" + senha, true);

      // Atribui uma função para ser executada sempre que houver uma mudança de ado
      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) {
               result.innerHTML = xmlreq.responseText;
            }else{
               result.innerHTML = "Erro: " + xmlreq.statusText;
            }
         }
      };
      xmlreq.send(null);
   }, delay*1000);
}
2
  • Muito Obrigado! Era exatamente o que eu precisava. 30/12/2017 às 0:13
  • @JoãoVictor Disponha amigo!
    – Meu ovo
    30/12/2017 às 0:13
0

O ideal é vc não aumentar o tempo de loading, isso vai causar uma falsa impressão de que a operação que o usuário acabou de disparar, é lenta. Tenha em mente SEMPRE, quanto mais rápido melhor.

Mas se vc realmente quiser fazer o loading demorar um pouco mais, a melhor coisa é vc encapsular ele em um metodo que faça o toggle dele. De um jeito simples e sujo seria algo assim

let showLoading = () => {
  // adicione aqui a transição de entrada do loading
  // recomendo criar uma class no css e add ela para
  // iniciar a transição
}

let hideLoading = () => {
  // adicione aqui a transição de saída do loading
  // recomendo criar uma class no css e add ela ou
  // remove a de entrada para fazer a saída animada
}

// Com os dois métodos acima, vc já conseguiria
// Resolver esse problema, contudo, se vc ainda
// Quiser fazer um toggle, vc pode fazer isso:

let showToHide, hideToShow, toggleLoading

showToHide = () => toggleLoading = () => { showLoading(); toggleLoading = hideToShow() }
hideToShow = () => toggleLoading = () => { hideLoading(); toggleLoading = showToHide() }

toggleLoading = showToHide()

toggleLoading() // vai mostrar o loading e vai definir o toggleLoading como hideToShow para esconder na próxima chamada do toggleLoading

toggleLoading() // vai esconder o loading e vai definir o toggleLoading como hideToShow para exibir na próxima chamada do toggleLoading

Vi que você está usando es5, para funcionar o exemplo que mandei, basta trocar let por var e () => por function(){}.

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 .