Można jeszcze użyć: Bringing Sleep to Native JavaScript , How to make your JavaScript functions sleep
Przykład
<div class="console"></div>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
border: 0;
}
.console {
width: 90vw;
height: 50vh;
margin: 1em auto;
padding: 1em;
border-radius: 0.25em;
box-shadow: 0 0 2px 2px silver;
background-color: black;
}
.console .cmd-text {
color: #1ff042;
display: block;
font-family: monospace;
font-weight: bold;
text-transform: uppercase;
font-size: 1.225em;
letter-spacing: 0.15em;
text-shadow: 1px 1px 2px green, 1px 2px 4px limegreen, 1px 2px 4px green;
padding-bottom: 0.5em;
}
.console .cmd-line::before {
content: '>';
padding-right: 0.5em;
color: yellow;
}
.console .cmd-line::after {
display: inline-block;
vertical-align: -0.15em;
width: 0.75em;
height: 1em;
margin-left: 5px;
background: #1ff042;
opacity: 1;
box-shadow: 1px 1px 1px rgba(31, 240, 66, 0.65),
-1px -1px 1px rgba(31, 240, 66, 0.65),
1px -1px 1px rgba(255, 240, 66, 0.65),
-1px 1px 1px rgba(31, 240, 66, 0.65);
-webkit-animation: cursor-blink 1.15s infinite;
-moz-animation: cursor-blink 1.15s infinite;
animation: cursor-blink 1.15s infinite;
content: '';
}
@keyframes cursor-blink {
from { opacity: 1; }
20% { opacity: 1; }
30% { opacity: 1; }
40% { opacity: 0; }
50% { opacity: 0; }
60% { opacity: 0; }
70% { opacity: 1; }
to { opacity: 1; }
}
.console .cmd-line-enter::before {
content: '>';
padding-right: 0.5em;
color: yellow;
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function writeOnConsole() {
const cmd_text = [
'Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.',
'Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.',
'Pięć wieków później zaczął być używany w przemyśle elektronicznym, pozostając praktycznie niezmienionym.',
'Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum.'
];
const board = document.querySelector('.console');
await sleep(1000);
for (let i=0; i<cmd_text.length; ++i) {
const span = document.createElement('span');
span.setAttribute('class', 'cmd-line cmd-text');
board.appendChild(span);
await sleep(1000);
for (let j=0; j<cmd_text[i].length; ++j) {
span.textContent += cmd_text[i][j];
await sleep(30);
}
await sleep(600);
if (i<cmd_text.length - 1) {
span.classList.remove('cmd-line');
span.classList.add('cmd-line-enter');
}
}
}
window.onload = () => {
writeOnConsole();
}