如何解决一次运行一个函数的所有实例,防止函数中断自身
目前 JavaScript 一键运行完美。但是,当我在该功能已经运行的情况下单击“测试测试”按钮时,它似乎会中断自己。我希望第二次点击自己排队并等到“谢谢!”消失了。在“谢谢!”之后从第一次点击消失,然后,只有这样,我希望第二次点击再次运行该功能。
这应该适用于所有后续点击。如果我非常快速地连续点击按钮 5 次,完整功能应该按顺序播放 5 次,而不是重叠本身并只输入一个“谢谢”。
这是演示形式的JS: https://jsfiddle.net/p562thwe/
let egg = document.querySelector("#egg");
let petEffects = document.querySelector("#streamPet");
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve,ms));
}
document.querySelector("#button").onclick = async function demo() {
egg.classList.add("bounce");
await sleep(3000);
egg.classList.remove("bounce");
petEffects.innerText = `Wowee!`;
petEffects.classList.add("typing");
await sleep(2000);
petEffects.innerText = ``;
petEffects.classList.remove("typing");
await sleep(100);
petEffects.innerText = `Thank you!`;
petEffects.classList.add("typing");
await sleep(3000);
petEffects.innerText = ``;
petEffects.classList.remove("typing");
}
demo();
我尝试添加一个布尔值,但我无法让它工作,我也不认为它会“排队”下一个实例。
解决方法
您可以完全构建:队列。
const queue = [];
let running = false;
function run() {
if (queue.length > 0) {
running = true;
const next = queue.shift();
next().then(run); // this will call run again when the promise is "done"
} else {
running = false;
}
}
async function demo() {
...
}
document.querySelector("#button").onclick = function() {
queue.push(demo);
if (!running) {
run();
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。