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>;
};
This is my sample code.
I was hoping the interval function keeps running no matter prompter is shown or not.
But as question says, the component gets paused and timer gets stopped until the prompter is resolved by user input.
Is there a way to keep interval runs as well as the component keeps render a new state?
And more deeper, I am also curious about what causes this behavior.
I guessed it comes from something related single threaded aspect of javascript but as I said, it is just guessing.
The spec says that prompt must pause while waiting for the user's response:
https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-prompt-dev
The prompt(message, default) method steps are:
...
- Pause while waiting for the user's response.
https://html.spec.whatwg.org/multipage/webappapis.html#pause
While a user agent has a paused task, the corresponding event loop must not run further tasks, and any script in the currently running task must block. User agents should remain responsive to user input while paused, however, albeit in a reduced capacity since the event loop will not be doing anything.
I thought you could get around it by using an iframe, but apparently even that doesn't work:
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>Which means, your only way around it, realistically, is to fake a prompt, something like Creating a suitable replacement for prompt