javascript-脚本不工作

我正在尝试构建“点击图片”游戏，在这个游戏中，页面上显示的图片很少，而“覆盖”的图片很少，而“打开”的图片只有一个（正在更改的图片）。 我的想法是在用户选择上启动一个while循环，创建一个随机id（每张卡都有一个id）并将其发送到另一个函数。我想那部分很好用。 功能2应“翻转”卡1秒，然后再次覆盖它们。 在控制台中，我可以看到“flip”类正在被添加，但没有被删除，但是在页面上所有的卡片都被“覆盖”。 我认为问题在于第一个函数发送随机数太快，而flip函数设置了超时。有人能证实吗？ 有什么解决办法吗

代码是： 请不要介意那个难看的按钮

var电流卡；
var audioWin=新音频（'sound/win.mp3'）；
var idNum=“a”
//获取字符串id并从中删除“翻转”类
函数翻转（idNum）{
console.log（“在翻转中”）；
currentCard=document.getElementById（idNum）；
currentCard.classList.add（'flipped'）；
setTimeout（函数（）{
currentCard.classList.remove（'flipped'）；
}, 1000)
}
//如果用户在卡“打开”时点击img，则播放声音
函数（当前卡）{
if（currentCard.classList.contains（'fliped'））{
audioWin.play（）；
}
否则{
//再放一个短音
}
}
//创建范围为1-4的随机NUM
函数randCard（）{
while（true）{
var secretNum=Math.floor（（Math.random（）*4）+1）；
idNum=secretNum.toString（）；
console.log（idNum）；
翻转（idNum）；
//document.getElementById（idNum）；
}
}

.card{
背景颜色：粉红色；
身高：165px；
宽度：165px；
浮动：左；
保证金：5px；
}
.卡img{
位置：绝对位置；
}
.翻了，回来{
显示：无；
}
.按钮{
宽度：60px；
高度：60px；
背景颜色：绿色；
浮动：左；
}

我的应用程序
在这里

是的，我想您已经了解了，我将从该函数中删除循环：

function randCard(){
    var secretNum=Math.floor((Math.random()*4)+1);
    idNum=secretNum.toString();
    console.log(idNum);
    flip(idNum);
  }

然后，在显示的卡超时并翻转后再次调用randCard（）：

function flip(idNum){
  console.log("in flip");
  currentCard=document.getElementById(idNum);
  currentCard.classList.add('flipped');

  setTimeout(function () {
    currentCard.classList.remove('flipped');
    randCard();
  }, 1000)


}

加载DOM后，调用randCard（）开始循环：

//PLace this right after your global variable declarations
document.addEventListener("DOMContentLoaded", function(){
    //Initial call of randCard()
    randCard();
}

---

首先也是最重要的是，

while（true）{…}

不正确。这将阻止所有内容并使您的页面无响应。