如何创建列表项随机化器但只显示一次项目？

Question

我想制作一个只显示该项目一次的列表项目随机发生器。我有一个从数组中提取的基本随机化器，但是当我单击按钮时，它只是继续循环遍历每个项目。有没有办法让每个项目只显示一次，然后在完成后停止 and/or 显示类似“list over”的内容？我的js技能很基础...

js随机化器代码：

        var techniques = [
            "item 1",
            "item 2",
            "item 3",
            "item 4",
            "item 5"
        ]

        function newTechnique() {
            var randomNumber = Math.floor(Math.random() * (techniques.length));
            document.getElementById('techDisplay').innerHTML = techniques[randomNumber];
        }

和html

<div id="techDisplay"></div>
<button onclick="newTechnique()">New Technique</button>

我也想知道是否有更好的方法来提取数据，比如使用 xml 之类的？我打算在列表中包含 50 多个项目，这在 js 中可能会变得很麻烦。让我知道并提前致谢！

Answer 1

先打乱数组。这叫做 'Durstenfeld shuffle'.

要回答您是否应该通过 XML 或其他地方提取数据，我想说考虑也许只制作一个 JSON 文件。在提取 1000 条记录中的 100 条之前，您绝对不会运行遇到性能问题，所以如果您处理的数据量如此之小，甚至不必担心性能问题。就个人而言，我通常保留一个单独的文件，其中包含 return 我需要的所有初始数据的函数，或者您可以创建一个 JSON 文件并在打开应用程序后立即导入它。

How to randomize (shuffle) a JavaScript array?

let techniques = [
  "item 1",
  "item 2",
  "item 3",
  "item 4",
  "item 5"
];
let techniquesRandom = shuffleArray(techniques);

console.log(techniquesRandom);

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

Answer 2

如果我理解你的意思，你的意思是你想随机化数组项：这是代码

function shuffle(array) {
  randoms = [Math.trunc(Math.random() * array.length)];
  let length = array.length;
  while (randoms.length != length) {
    for (let i = 0; i < array.length; i++) {
      r = Math.trunc(Math.random() * array.length);
      if (!randoms.includes(r)) {
        randoms.push(r);
      }
    }
  }
  let result = [];
  for (let b = 0; b < array.length; b++) {
    result.push(array[randoms[b]]);
  }
  return result;
}

Answer 3

您可以创建一个标志。

var clicked = false;

在newtechnique里面你可以检查clicked是否是false。然后让它成为现实。下次 techdisplay 不会被覆盖。

Answer 4

这是您要查找的功能的代码

const techniques = [
        'Currently showing item 1',
        'Currently showing item 2',
        'Currently showing item 3',
        'Currently showing item 4',
        'Currently showing item 5',
        'Currently showing item 6'
      ];

      let flags = techniques.map(() => false);

      function getNotShownNumber() {
        let whichItemToShow;
        const allAreTrue = flags.every((v) => v === true);

        if (!allAreTrue) {
          let value = true;
          do {
            const randomNumber = Math.floor(Math.random() * techniques.length);
            const alreadyShown = flags[randomNumber];

            if (!alreadyShown) {
              flags[randomNumber] = true;
              whichItemToShow = randomNumber;
              value = false;
            }
          } while (value);
        } else {
          whichItemToShow = 'Completed';
        }

        return whichItemToShow;
      }

      function newTechnique() {
        const number = getNotShownNumber();

        const content =
          number === 'Completed' ? 'List Over' : techniques[number];

        document.getElementById('techDisplay').innerHTML = content;
      }

<div id="techDisplay"></div>
<button onclick="newTechnique()">New Technique</button>

如何创建列表项随机化器但只显示一次项目？

How can I create a list item randomizer but only show item once?

html

javascript

arrays

random

listitem