Recibí una solicitud para eliminar un div y mostrar una alerta. Por lo tanto, mi primer código es el siguiente:

$(document).ready(function(){

 $('#headerDiv').hide();

 alert('something wants to say');

});

No ocultaba el div antes de la alerta en cromo y borde, así que cambio la línea de alerta a

setTimeout(function(){

 alert('something wants to say');

},100);

Funciona bien, pero quiero saber por qué sucede. Además, creo que el problema puede volver a ocurrir dependiendo del rendimiento de la computadora, por lo que quiero saber si hay alguna solución de calidad o no.

3
kim hwikyeong 23 jun. 2020 a las 09:44

3 respuestas

La mejor respuesta

setTimeout se empuja al final de la ejecución actual de la pila, por lo tanto, le da al navegador el tiempo para interrumpir el JS y procesar los cambios. setTimeout es una posible solución a esto.

Otra posibilidad podría ser disparar un evento después del .hide() que dispara el alert.

(puede encontrar más información sobre la implementación setTimeout aquí

0
Greedo 23 jun. 2020 a las 07:08

Puede probar la solución a continuación, mostrará alert cuando se complete el ocultamiento. No dependerá del rendimiento de su sistema.

$(document).ready(function(){
  $('#headerDiv').hide({done: function() { alert("something want to say!"); } });
  //** you can still add a delay */
  //$('#headerDiv').hide({done: function() { setTimeout(function(){alert("Hiding complete!") },100) }});
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="headerDiv"> headerDiv headerDiv</div>
0
Alok Mali 23 jun. 2020 a las 07:35

Esto se debe a que JS se ejecuta primero antes de cualquier cambio. Hay muchas cosas que puedes hacer.

  1. Use una forma diferente de mostrar alerta, como una superposición.
  2. Utilice un Promesa
  3. Dispare un evento después de ocultar, y ate el alerta a ese evento.
0
Abhishek Kumar Tiwari 23 jun. 2020 a las 07:11