英文:
can't change text javascript
问题
我尝试在JavaScript上制作动画。
它应该看起来像：
帧1：
ඞ______ _
帧2：
_ඞ_____ _
帧3：
__ඞ____ _
帧4：
___ඞ___ _
我想要做一些在几秒后改变文本的东西。所以我有一个标签，这是代码的一部分。
document.getElementById('label').innerHTML='ඞ______ _';
sleep(500);
但如果我使用sleep函数，页面会等待，直到我的'动画'完成，然后我才能看到最后的文本：
___ඞ___ _
有办法解决这个问题吗？
英文:
I tried to make an animation on javascript.
It should look like:
Frame 1:
ඞ______ _
Frame 2:
_ඞ_____ _
Frame 3:
__ඞ____ _
Frame 4:
___ඞ___ _
I want to something that changes the text after some seconds. So I've got a label and this is a snippet of a code.
document.getElementById('label').innerHTML='ඞ______ _';
sleep(500);
But if I use the sleep function, the page 'waits' until my 'animation' is finished and then I can see the last text:
___ඞ___ _
Is there a way to solve this problem?
答案1
得分: 0
你需要将你的代码修改以使用间隔或超时。
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);
现在你可以使用 sleep 吗？是的，你可以使用异步和等待。
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>
英文:
You need to code your thing to use an interval or timeout.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-css -->
#out {
font-family: monospace;
}
<!-- language: lang-html -->
<span id="out"></span>
<!-- end snippet -->
Now can you do sleeps? Yes you can do it with async and await.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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();
<!-- language: lang-css -->
#out {
font-family: monospace;
}
<!-- language: lang-html -->
<span id="out"></span>
<!-- end snippet -->
答案2
得分: -1
你应该使用async function来同时更新动画和执行JavaScript中的其他操作。
一个async function看起来像这样：
async renderAnimation() {
setTimeout(() => { this.animate() }, 500);
}
animate() {
document.getElementById('label').innerHTML = 'ඞ______ _';
}
你可以查看这个链接以深入了解async：https://www.w3schools.com/js/js_async.asp
英文:
You should use a async function for updating the animation at the same time of doing the other stuff your javascript is doing.
an async function looks like this
async renderAnimation () {
setTimeout(() => {this.animate() }, 500);
}
animate(){
document.getElementById('label').innerHTML='ඞ______ _';
}
You should check this link for a more in deep explanation of async: https://www.w3schools.com/js/js_async.asp
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论