2

Hola tengo un gif que se muestra durante ciertas peticiones del ajax lo muestro con el .show() y lo oculto con el hide() hasta ahi todo normal, y tengo una función que se encarga de de arrojar una alerta si el tiempo durante el que se muestra el gif excede lo normal del tiempo,

esta es la función

    var totalTiempo=5;

function updateReloj(){

    if(totalTiempo==0){
    $('#LoadingImage').hide();
    alert("Excede el tiempo");

    }else if($('#LoadingImage').is(':visible')){
        /* Restamos un segundo al tiempo restante */
        totalTiempo-=1;
        /* Ejecutamos nuevamente la función al pasar 1000 milisegundos (1 segundo) */
        setTimeout("updateReloj()",1000);
    };

};

este funciona normal ahora mi problema es el siguiente me gustaria saber si hay alguna manera de que se detecte cuando el LoadingImage cambia su estilo de hide a show y viceversa probé con estos métodos

if($('#LoadingImage').is(':visible')){
      //Cambio a visible 
      updateReloj();
  };

pero que pasa ese codigo lo tendria que poner despues de un show para que funcione entonces pense en poner un Change, pero este no me dectecta cuando cambia el LoadingImage de show() a hide() y viceversa y no se como hacer para que el change detecte eso.

si bien es cierto que puedo poner una llamada de la función después de cada show para mi seria mucho mejor un change del LoadingImage

2 respuestas 2

3

las funciones show() y hide() cambian la propiedad display

no la propiedad visibility por ello no te valida.

puedes verificar la propiedad display del elemento con la funcion css("display")

ejemplo:

setInterval(function(){
   // validamos el estado
   if($("h1").css("display")=="none"){
     $("h1").show();
   }else{
     $("h1").hide();
  }
  console.log("display:",$("h1").css("display"));
},1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>hola soy un h1</h1>

1
  • Excelente!!, funciono de maravilla gracias :) Commented el 28 ago. 2019 a las 20:16
2

Lllegué un poco tarde a esta pregunta, pero bueno, espero que sea útil.

Para detectar cambios en el DOM, se puede usar MutationObserver() (Observador de mutaciones). Lo que ganaríamos es que se genera un evento en el momento del cambio, de manera que no tenemos que estar evaluando permanentemente si cambió algo o no.

MutationObserver es una clase que se instancia pasando el callback en el que indicaríamos que vamos a hacer cuando cambie lo que estamos observando. Una vez creada la instancia con el callback, pasamos dos parámetros al objeto que creamos, 1 - el nodo que vamos a observar y 2 - que es lo que vamos a observar de ese nodo (en el ejémplo es: observer.observe(box, {attributes: true})).

Acá dejo un ejémplo pero detectándo el ancho de un div, para que se entienda mejor y sea mas visible. Tanto en este caso como en el de la pregunta, vamos a observar cambios en attributes, pero podemos observar muchas otras cosas, aquí la lista.

const box = document.getElementById("box"); // <-- El nodo que observamos
setInterval(() => {// <-- Esto es solo para generar un cambio
  box.style.width = (Math.floor(Math.random() * 300) + 1) + "px";
}, 1000);



const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {         // <-- Este es el calback
    if (mutation.target.style[0] === "width") {
      console.log("cambio " + mutation.target.style.cssText);
    }

  });
});

observer.observe(box, {attributes: true});// <-- Iniciamos el observer
#box {
  height: 50px;
  background-color: red;
}
<div id="box"></div>

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.