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
    Commented el 15 may. 2020 a las 5:54

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.