防止 if 语句在已经运行时运行（Vanilla JS）

Question

我有一个看起来像这样的if语句：

if( extra.RewardId === "idnumberhere") {
        egg.classList.add("bounce");
        setTimeout (() => {
            egg.classList.remove("bounce");
            petEffects.innerText = `Working`;
            petEffects.classList.add("typing");
        }, 3000);
        setTimeout (() => {
            petEffects.innerText = ``;
            petEffects.classList.remove("typing");
        }, 5000);
}

它比这长一点，但主要问题是如果我第二次触发if语句，它会中断自己，太快了。

go 如何让第二个实例等到第一个if语句完全运行，并且在下一个实例开始之前通过这 5000 毫秒？

编辑

https://jsfiddle.net/d2jhmec1/2/

我已经安全地分享了 JSfiddle。 单击该按钮将显示我当前正在使用的内容。 单击两次时，它会中断。

Answer 1

您应该能够设置一个 Boolean 标志，它会告诉您是否运行代码。

像这样的东西：

let canAddBounce = true;
let canRemoveBounce = true;

if(extra.RewardId === "idnumberhere") {
    if (canAddBounce) {
        canAddBounce = false;
        egg.classList.add("bounce");
        setTimeout (() => {
            egg.classList.remove("bounce");
            petEffects.innerText = `Working`;
            petEffects.classList.add("typing");
            canAddBounce = true;
        }, 3000);
    }
    if (canRemoveBounce) {
        canRemoveBounce = false;
        setTimeout (() => {
            petEffects.innerText = ``;
            petEffects.classList.remove("typing");
            canRemoveBounce = true;
        }, 5000);
    }
}