0

tengo un codigo en el que cada vez que pulso un boton me muestra una palabra aleatoria de la lista mediante un codigo js.

Ahora quiero que no se muestra la palabra al instante, sino que tarde unos segundos en mostrar la palabra y mientras pasan esos segundos se muestre una imagen gif de carga. Cuando acaben esos segundos la imagen cambia y se muestre una por ejemplo de HAS TERMINADO!.

¿Cómo hago para programar ese retraso en que muestre la información?

HTML

        <!-- Gif mientras carga -->
<div id="cocinando">
    <img src="images/cocinando.gif" alt="cocinando" title="Cocinando"/>
    <p>cocinando</p>
</div>

<!-- Muestra la palabra aleatoria -->
<div class="word">
  <span id="wordOutput"></span>
</div>
<button id="randomWordGen">Generate</button>

JS

document.addEventListener('DOMContentLoaded', function () {
  var clickTimes = 0;
  var btnRandomWord = document.getElementById('randomWordGen');
  var wordOutput = document.getElementById('wordOutput');
    

  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', 'randomwordgen.php');
      request.onload = function () {
        // estado 4 = petición completada y respuesta recibida
        if (request.readyState === 4) {
          // código HTTP 200 = petición exitosa
          if (request.status === 200) {
            wordOutput.textContent = request.responseText;
            clickTimes++;
          }
        }
      };
      request.send(); // se envía la petición
    } else {
      wordOutput.textContent = 'PALABRA FINAL';
    }
  });
});

RESULTADO introducir la descripción de la imagen aquí

1 respuesta 1

1

En el evento click del botón que hace la petición AJAX, debes mostrar el gif. Luego, cuando se reciba la palabra del servidor, defines un timeout con los segundos que quieras. Cuando el timeout se ejecute, sacas la imagen de carga.

document.addEventListener('DOMContentLoaded', function () {
  var clickTimes = 0;
  var loadingImage = document.getElementById('cocinando');
  var btnRandomWord = document.getElementById('randomWordGen');
  var wordOutput = document.getElementById('wordOutput');


  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
      loadingImg.classList.add('visible'); // agrega la clase CSS 'visible'

      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', 'randomwordgen.php');
      request.onload = function () {
        // estado 4 = petición completada y respuesta recibida
        if (request.readyState === 4) {
          // código HTTP 200 = petición exitosa
          if (request.status === 200) {
            // se define un timeout de 2.5 segundos (ms)
            window.setTimeout(function () {
              loadingImg.classList.remove('visible');
              wordOutput.textContent = request.responseText;
              clickTimes++;
            }, 2500);
          }
        }
      };
      request.send(); // se envía la petición
    } else {
      wordOutput.textContent = 'PALABRA FINAL';
    }
  });
});

En tu CSS añade un par de reglas:

#cocinando {
  opacity: 0;
  transition: all .25s ease;
  visibility: hidden;
}
#cocinando.visible {
  opacity: 1;
  visibility: visible;
}
5
  • Gracias por responder @guzgarcia , he probado el código pero me da el siguiente error: Uncaught ReferenceError: loadingImg is not defined at HTMLButtonElement.<anonymous> (generador.js:10). He probado a definir la clase en el css y linkear a la libreria de ajax de google con <script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/…> , pero no he obtenido resultado. ¿Cómo soluciono el error? el 5 feb. 2017 a las 11:28
  • He probado cambiar el: loadingImg.classList.add('visible'); por $("#cocinando").addClass("visible"); y el loadingImg.classList.remove('visible'); por $("#cocinando").removeClass("visible"); ..... funciona bien, pero me gustaría poder hacerlo como tú me has dicho ya que supongo que funcionara mejor, y ya que me has ido guiando me gustaria seguir tu forma de programar para aprenderlo bien.. ¿A qué se puede deber esto? el 5 feb. 2017 a las 11:42
  • Me equivoque al escribir. Cambia la declaración de loadingImage por loadingImg y funcionará.
    – gugadev
    el 5 feb. 2017 a las 12:20
  • Sobre lo de "hacerlo como tú me has dicho porque supongo estará mejor", no es tanto así. Yo no soy muy partidiario de jQuery, porque no le veo tanta utilidad como antes. Además, al ser un objeto gigante es mucho más lento y tiene muchas menos op/s que JavaScript.
    – gugadev
    el 5 feb. 2017 a las 12:42
  • 1
    Muchas gracias de nuevo @guzgarcia , me has servido de mucha ayuda. Intentaré seguir aprendiendo js poco a poco. Un saludo! el 5 feb. 2017 a las 13:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.