Javascript 为什么我的代码导致（编辑：）我的页面崩溃？

我试图将一些图像随机加载到页面的html div中，我的代码有时会正常工作，就像第一次加载页面一样，但在第二次或第三次加载时，它可能会导致页面空白、缓冲并使选项卡崩溃。 以下是指向完整文件（不包括图像SRC）的链接：

下面是完整的js文件：（请小心，如果您多次重新加载它，会使选项卡崩溃）

var-topnum=7//稍后将用于表示当前索引
var rando//稍后将用作交换索引
var临时性//稍后将用作临时持有者，以便我们可以交换rando和topnum
var myCard=document.getElementsByClassName（'card'）；
var myArray=[
'Images/acehart.png'，
'Images/acehart.png'，
“Images/kinghart.png”，
“Images/kinghart.png”，
“Images/queenhart.png”，
“Images/queenhart.png”，
'Images/tenheart.png'，
'Images/tenheart.png'
];
函数create（）{
while（topnum>0）{//在所有8个元素上循环
rando=Math.floor（（Math.random（）*topnum）+0）；
//只要我们得到的随机索引与当前索引不同，就会交换元素
如果（myArray[rando]！==myArray[topnum]）{
临时=myArray[topnum]；
myArray[topnum]=myArray[rando]；//随机化topindex值
myArray[rando]=临时；
托普纳姆--；
}；//如果结束
}//while结束
对于（var i=0；i您有8张卡，但您的循环运行9次迭代

改变

for(var i = 0; i <= 8;i++)

您有8张卡，但循环运行9次迭代

改变

for(var i = 0; i <= 8;i++)

我严重怀疑该代码是否会导致堆栈溢出错误。在您的
while
循环中，如果
if
条件为false，则toponum将永远不会减少。@GerardoFurtado，您的建议可能是唯一的溢出原因。如果我是您，我会将此注释提升为答案。@GerardoFurtado是的，就是这样。我的代码运行得非常完美现在很好，谢谢你，不用担心。请接受@nem035回答，它解释了将
toponum--
放在哪里。我严重怀疑该代码是否会导致堆栈溢出错误。在
while
循环中，如果
if
条件为false，toponum将永远不会减少。@GerardoFurtado，您的建议可能是唯一的溢出原因on。如果我是你，我会将此评论升级为答案。@GerardoFurtado是的，就是这样。我的代码现在运行得很好，谢谢你，不用担心。请接受@nem035 answer，它解释了在哪里放置
topnum--
。
for(var i = 0; i <= 8;i++)

for(var i = 0; i < 8;i++) // use `<` instead of `<=`

while(topnum > 0) {
  rando = Math.floor((Math.random() * topnum) + 0);
  if(myArray[rando] !== myArray[topnum]){ 
    // ...
  }
  topnum--; // <-- move the decrement here
}