Question

我正在写一个javascript代码。但是当我尝试在浏览器（firefox＆amp; chrome）浏览器上执行它时，只是冻结并且必须强制它退出。我试图在leftSide的随机位置生成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>

Answer 1

您将numberOfFaces定义为5，然后启动while循环，检查该变量是否具有 truthy 值 - 任何高于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是假的。

Answer 2

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

Answer 3

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

您正在寻找：

for(var i=numberOfFaces; 0 < i; i--){
  // your iteration code
}

浏览器冻结这个js代码，为什么？

3 个答案: