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

Question

目前 JavaScript 运行一键点击即可。但是，当我在功能已经运行ning 时单击“测试测试”按钮时，它似乎会自行中断。我希望第二次点击自行排队并等到“谢谢！”消失了。在“谢谢！”之后从第一次点击消失，然后，只有这样，我希望第二次点击再次运行该功能。

这应该适用于所有后续点击。如果我非常快地连续点击按钮 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();

我已经尝试添加一个布尔值，但我无法让它工作，我也不认为它会 'queue' 下一个实例。

Answer 1

您完全可以构建：队列。

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

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

Run all instances of function one at a time, prevent function from interrupting itself

javascript

queue

function

async-await

subsequence

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

Run all instances of function one at a time, prevent function from interrupting itself

javascript

queue

function

async-await

subsequence

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