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