浏览器使用此JS代码冻结，为什么

browser freezes with this js code, why?

本文关键字：冻结 为什么 代码 JS 浏览器      更新时间：2023-09-26

我正在编写一个JavaScript代码。但是当我尝试在浏览器（Firefox&chrome）上执行它时，浏览器只是冻结并必须强制退出。我正在尝试在左侧的随机位置生成 5 张此图像。这是代码，这里有什么问题？

<html><head>
<title></title>
<meta charset=utf-8>
<style>
img {
    position: absolute;}
div {
    position: absolute;
    width: 500px;
    height: 500px;}
#rightSide {
    left: 500px;
    border-left: 1px solid black;}
</style>
    <script>
    var numberOfFaces = 5;
      function generateFaces() {
      while (numberOfFaces) {
      var smileFace = document.createElement("img");
      var random_number = Math.floor(Math.random() * 400);
      smileFace.src = "smile.png";
      smileFace.style.top = random_number + "px";
      smileFace.style.left = random_number + "px";
      document.getElementById('leftSide').appendChild(smileFace);}}
</script>
</head>
<body onload="generateFaces()">
<h2>Matching Game</h2>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body></html>

您将numberOfFaces定义为 5，然后启动一个 while 循环，检查该变量是否具有真值 - 任何大于 0 的值都是真值。但是，该变量永远不会改变，从而导致无限循环。

您需要使用 numberOfFaces--; 或类似方式在循环中的某个地方递减它。也许是这样的：

<script>
    var numberOfFaces = 5;
    function generateFaces() {
      while (numberOfFaces) {
        var smileFace = document.createElement("img");
        var random_number = Math.floor(Math.random() * 400);
        smileFace.src = "smile.png";
        smileFace.style.top = random_number + "px";
        smileFace.style.left = random_number + "px";
        document.getElementById('leftSide').appendChild(smileFace);
        numberOfFaces--;
      }
    }
</script>

也许做一个关于while循环的教程来帮助更多地理解这一点：http://www.tutorialspoint.com/javascript/javascript_while_loop.htm

注意：上面的 while 循环将在numberOfFaces变得0时停止。在 JS 中，0 是假的。

你的这个while循环是一个无限循环; numberOfFaces 常数为 5，这是一个真值。尝试将其更改为其他内容。

while(true) {
  // never stops
  // 5 is truthy value
}

您正在寻找这个：

for(var i=numberOfFaces; 0 < i; i--){
  // your iteration code
}
相关文章：