1

Devs, tengo un cronómetro que se paraliza cuando se ejecuta beforeunload al intentar cambiar de dirección o actualizar la página. Cuando se cancela el prompt el cronómetro continua. Pero ese no es el comportamiento que espero.

Espero que aunque aparezca el prompt de beforeunload el cronómetro siga contando...

El cronómetro funciona con useEffect y useRef, normal.

Y aquí está mi uso de beforeunload:

  useEffect(() => {
    const handleBeforeUnload = (event) => event.preventDefault();
    if (checkTestState(TEST_STATES.IN_PROCESS)) {
      window.addEventListener('beforeunload', handleBeforeUnload);
    } else {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    }
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  });

1 respuesta 1

1

Lo que pretendes es imposible.

Tal y como funciona Javascript, los eventos de setTimeout( ) o setInterval( ) dependen de que el bucle de eventos del lenguaje esté en ejecución. Dependen de que solo se realicen tareas asíncronas.

Cualquier tarea síncrona (prompt, operaciones AJAX síncronas, ...) detiene el bucle de eventos, con lo que cualquier setTimeout( ) o setInterval( ) deja de ejecutarse hasta que se reanude el ciclo de eventos.

Una alternativa es usar Date.now( ) para controlar el tiempo real, se esté o no en el bucle de eventos:

const BeginShutdown = Date.now( );
var iHandler = setInterval( function( ) {
  var millis = Date.now( ) - BeginShutdown;

  if( millis > 5000 ) {
    window.clearInterval( iHandler );
    window.alert( `Han pasado ${millis} milisegundos.` );
  }
}, 250 );

window.confirm( "Este mensaje BLOQUEA el bucle de eventos." );

El código anterior muestra un mensaje. Si se pulsa en aceptar:

  • Antes de que pasen 5 segundos, el alert( ) se muestra en el momento establecido, 5 segundos después de comenzar la ejecución.

  • Después de que pasen 5 segundos, el alert( ) se muestra en cuanto se abandone el message( ).

1
  • 1
    Gracias, esto me da una idea de como manejarlo.
    – V0LT3RR4
    el 15 may. 2020 a las 5:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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