算法停止了，我不知道为什么

Question

嘿! 我正在尝试使用HTML，CSS和Javascript编码Pexeso。 我有随机生成函数（不能多次使用数字-我用数组解决了这个问题）。 然后我有另一个函数，该函数调用上述函数，并根据返回的img元素的id进行选择并设置图像源。 一切看起来都很正确-IDE和Google Chrome浏览器不会返回任何错误，但是它仍然做不到正确的事情-它从不提供所有图像。

我将放置代码，并在编译后检查其外观。

HTML

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title></title>
    <meta charset='utf-8'>
    <link href='style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
  <div class="container">
    <img class="pexeso" src="" id="1">
    <img class="pexeso" src="" id="2">
    <img class="pexeso" src="" id="3">
    <img class="pexeso" src="" id="4">
    <img class="pexeso" src="" id="5">
    <img class="pexeso" src="" id="6">
    <img class="pexeso" src="" id="7">
    <img class="pexeso" src="" id="8">
    <img class="pexeso" src="" id="9">
    <img class="pexeso" src="" id="10">
    <img class="pexeso" src="" id="11">
    <img class="pexeso" src="" id="12">
    <img class="pexeso" src="" id="13">
    <img class="pexeso" src="" id="14">
    <img class="pexeso" src="" id="15">
    <img class="pexeso" src="" id="16">       
  </div>
  <script src='app.js'></script>
  </body>
</html>

JS

var position;
position = new Array();

function generateNumber(){
//generates random number between 0 and 15
var number = Math.round(Math.random()*15)+1;

//checks if number is already used
for (var i = 0; i <= position.length; i++){
    if (position[i] == number){
        generateNumber();
    }

//returns number
    console.log(number);
    position.push(number);
    return number;
}
}

function mixPexeso(){
for (var i = 0; i <= 7; i++){
//sets images to their location and type their position
    var firstImage = generateNumber();
    var secondImage = generateNumber();
    var image = 'img/image-'+i+'.png';

    document.getElementById(firstImage).src = image;
    document.getElementById(secondImage).src = image;
    }
}

mixPexeso();

屏幕： https ： //prnt.sc/l4wr1q

Answer 1

问题：

当发现该数字已经存在时，应中断循环并返回generateNumber的结果：

if (position[i] == number) {
    return generateNumber();
}

替代方式：

不管怎么说，功能generateNumber可以以更好的方式通过移除递归调用，并在密封的包装IIFE整件事实现：

var generateNumber = (function() {
  var numbers = [];

  return function() {
    var number;
    do {
      number = Math.floor(Math.random() * 16);
    } while(numbers.includes(number));
    numbers.push(number);
    return number;
  }
})();

最好的办法：

一个更好的方法是预填有数字（0〜15）的阵列，它们洗牌，然后将每个函数被调用的时候，你只是pop或shift从数组数：

var generateNumber = (function() {
  var numbers = [];

  for(var i = 0; i < 16; i++) numbers.push(i);

  for(var i = 0; i < 16; i++) {
    var randIndex = Math.floor(Math.random() * 16);
    var temp = numbers[i];
    numbers[i] = numbers[randIndex];
    numbers[randIndex] = temp;
  }

  return function() {
    return numbers.pop();
  }
})();