Set loading time for loading

2

I have the following code that I use to send form data to the PHP file.

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);
}

I would like to increase the loading time of the loading and know how I can do this.

    
asked by anonymous 30.12.2017 / 00:55

2 answers

2

You can use setTimeout with callback to delay the request time. Here's how I created a delay variable where you can put a value in seconds:

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);
}
    
30.12.2017 / 01:09
0

Ideally not to increase loading time, this will cause a false impression that the operation that the user just fired is slow. Keep in mind ALWAYS , the faster the better.

But if you really want to make loading take a little longer, the best thing is to encapsulate it in a method that does toggle it. In a simple way and dirty would be something like this

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

I saw that you are using es5, to work the example I sent, just change let by var and () => by function(){} .

    
30.12.2017 / 01:30