const TestComponent: React.FC = (props) => { const [count, setCount] = useState(100); useEffect(() => { const interval = setInterval(() => { if (count === 98) { prompt("helloworld?"); clearInterval(interval); } setCount((count: number) => count - 1); }, 1000); return () => { clearInterval(interval); }; }, [count]); return <div>{count}</div>; };Este es mi código de muestra.
Esperaba que la función de intervalo siguiera ejecutándose sin importar si se muestra o no el aviso.
Pero como dice la pregunta, el componente se detiene y el temporizador se detiene hasta que el indicador se resuelve con la entrada del usuario.
¿Hay alguna manera de mantener las ejecuciones de intervalos y que el componente siga representando un nuevo estado?
Y más profundo, también tengo curiosidad por saber qué causa este comportamiento.
Supuse que proviene de algo relacionado con el single threaded aspect of javascript , pero como dije, solo es una suposición.
La especificación dice que prompt debe hacer una pausa mientras espera la respuesta del usuario:
https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-prompt-dev
Los pasos del método de solicitud (mensaje, predeterminado) son:
...
- Haga una pausa mientras espera la respuesta del usuario.
https://html.spec.whatwg.org/multipage/webappapis.html#pause
Mientras que un agente de usuario tiene una tarea en pausa, el bucle de eventos correspondiente no debe ejecutar más tareas y cualquier secuencia de comandos en la tarea que se está ejecutando actualmente debe bloquearse. Sin embargo, los agentes de usuario deben seguir respondiendo a la entrada del usuario mientras están en pausa, aunque con una capacidad reducida, ya que el bucle de eventos no hará nada.
Pensé que podría solucionarlo usando un iframe, pero aparentemente ni siquiera eso funciona:
window.onmessage = function(e) { console.log('done'); }; setInterval(() => console.log('waiting'), 1000) <iframe style="height:0; width: 0; display: none" id="demo" srcdoc="<script>window.parent.postMessage(prompt('hello'), '*')</script>"> </iframe>Lo que significa que, de manera realista, la única forma de evitarlo es falsificar un aviso, algo así como crear un reemplazo adecuado para el aviso .