Pause loading html elements

I have a Dream weaver js code (not mine) from 2004 year. It should type symbols with some delay. But it doesn't.

<script type="text/javascript">
<!--
// alert() // if I put an alert, everyting works correct
theDate=new Date();
thetime=Date().toString();
curtime=new Date();
lasttime=new Date();
var val=1000;
var newval=0;
function delay(val) {
var t3=0; 
lasttime=new Date()
t1=lasttime.getTime();
t3=t1+val;
curtime=new Date();
t2=curtime.getTime();
while (t2 < t3) {
curtime=new Date();
t2=curtime.getTime();
}
}
document.wait=delay;
<!--->
</script><script>
val=parseInt(top.frames[0].myform.mytext.value);
document.wait(val);
</script><script>
document.wait(val);
</script><script>
document.wait(val);
</script><script>
//val=100;
document.wait(val);
</script>
<B><BASEFONT SIZE="6" FACE="Arial Cyr" COLOR="#8000FF"> 
#    <script> document.wait(val);</script> 
,    <script> document.wait(val);</script> "<script> document.wait(val);</script>
&    <script> document.wait(val);</script>
§    <script> document.wait(val);</script>

But if I put alert before this code (it is commented in the sample) it will work. Not in all browsers (it will not work in IE, for example), but it will. How can I fix it without alert and why alert makes code work right?

As Yogi suggested, you should use a timeout or async functions to render characters to an element.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const typeWriter = (elementOrSelector, text, speed = 10) => {
const el = typeof elementOrSelector === 'string'
? document.querySelector(elementOrSelector)
: elementOrSelector;
let i = 0;
const fn = () => {
if (i < text.length) {
el.textContent += text[i++];
setTimeout(fn, speed);
}
}
fn();
};
typeWriter('#demo-slow', 'Lorem ipsum dummy text blabla.', 100);
typeWriter('#demo-fast', 'Lorem ipsum dummy text blabla.', 50);
typeWriter('#demo-faster', 'Lorem ipsum dummy text blabla.', 25);

<!-- language: lang-css -->

p { margin: 0; }

<!-- language: lang-html -->

<p id="demo-slow"></p>
<p id="demo-fast"></p>
<p id="demo-faster"></p>

<!-- end snippet -->

Here is an async version with a sleep:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const sleep = async (ms) => new Promise((res) => setTimeout(res, ms));
const typeWriterAsync = async (elementOrSelector, text, speed = 10) => {
const el = typeof elementOrSelector === 'string'
? document.querySelector(elementOrSelector)
: elementOrSelector;
for (let i = 0; i < text.length; i++) {
await sleep(speed);
el.textContent += text[i];
}
};
// All at once, like above
typeWriterAsync('#demo-slow', 'Lorem ipsum dummy text blabla.', 100);
typeWriterAsync('#demo-fast', 'Lorem ipsum dummy text blabla.', 50);
typeWriterAsync('#demo-faster', 'Lorem ipsum dummy text blabla.', 25);
// You can also chain
(async() => {
await typeWriterAsync('#demo-slow-chain', 'Lorem ipsum dummy text blabla.', 100);
await typeWriterAsync('#demo-fast-chain', 'Lorem ipsum dummy text blabla.', 50);
await typeWriterAsync('#demo-faster-chain', 'Lorem ipsum dummy text blabla.', 25);
console.log('Done!');
})();

<!-- language: lang-css -->

p { margin: 0; }

<!-- language: lang-html -->

<p id="demo-slow"></p>
<p id="demo-fast"></p>
<p id="demo-faster"></p>
<hr />
<p id="demo-slow-chain"></p>
<p id="demo-fast-chain"></p>
<p id="demo-faster-chain"></p>

<!-- end snippet -->