一次运行一个函数的所有实例，防止函数中断自身

问题描述

目前 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();
  }
};