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

问题描述

我有一个 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 语句，它会中断自己，太快了。

如何让第二个实例等到第一个 if 语句完全运行，然后在下一个实例开始前 5000 毫秒过去？

编辑

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

我已经制作了一个可以共享 JSfiddle 的保险箱。单击该按钮将显示我当前正在使用的内容。当点击两次时，它会中断。

解决方法

您应该能够设置一个布尔标志来告诉您是否运行代码。

像这样：

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