无法更改文本 JavaScript

Question

我尝试用javascript制作一个动画。

它应该看起来像:

坐标系1:

ඞ______ _

第二帧:

_ඞ_____ _

坐标系3:

__ඞ____ _

框架4:

___ඞ___ _

我想在几秒钟后改变文本。我有一个标签，这是一段代码。

document.getElementById('label').innerHTML='ඞ______ _';

sleep(500);

但是如果我使用sleep函数，页面会"等待"直到我的"动画"完成，然后我才能看到最后的文本:

___ඞ___ _

有办法解决这个问题吗?

Answer 1

你需要在代码中使用间隔或超时。

function annimateText(elem, frames, ms) {
let index = 0;
let timer;

const stop = () => window.clearTimeout(timer);

const update = () => {
elem.textContent = frames[index];
index++;
if (frames.length <= index) stop();
};
timer = window.setInterval(update, ms);

update();
return {
stop: timer,
};
}

const frames = [
"ඞ______ _",
"_ඞ_____ _",
"__ඞ____ _",
"___ඞ___ _",
"____ඞ__ _",
"_____ඞ_ _",
"______ඞ _",
"_______ඞ_",
]
annimateText(document.querySelector("#out"), frames, 100);

#out {
font-family: monospace;
}

<span id="out"></span>

现在你可以睡觉了吗?是的，你可以用async和await。

async function outputAndWait (text) {
document.querySelector("#out").textContent = text;
await sleep(100);
}
async function sleep (ms) {
return new Promise((resolve) => {
window.setTimeout(resolve, ms);
});
}
async function animateIt () {
await outputAndWait("ඞ______ _");
await outputAndWait("_ඞ_____ _");
await outputAndWait("__ඞ____ _");
await outputAndWait("___ඞ___ _");
await outputAndWait("____ඞ__ _");
await outputAndWait("_____ඞ_ _");
await outputAndWait("______ඞ _");
await outputAndWait("_______ඞ_");
}
animateIt();

#out {
font-family: monospace;
}

<span id="out"></span>

Answer 2

你应该在做其他事情的同时使用async function来更新动画。

和async function看起来像这样

async renderAnimation () {
setTimeout(() => {this.animate() }, 500);  
}
animate(){
document.getElementById('label').innerHTML='ඞ______ _';
}

你应该查看这个链接，以获得async的更深入的解释:https://www.w3schools.com/js/js_async.asp