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

【问题标题】：How can I create a list item randomizer but only show item once?如何创建列表项随机化器但只显示一次？
【发布时间】：2021-11-27 14:43:04
【问题描述】：

我正在寻找一个仅显示该项目一次的列表项随机化器。我有一个从数组中提取的基本随机发生器，但是当我单击按钮时，它只是继续循环遍历每个项目。有没有办法让每个项目只显示一次然后在完成后停止和/或显示类似“列表”之类的东西？我的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 中可能会变得很麻烦。提前告诉我，谢谢！

【问题讨论】：

标签： javascript html arrays random listitem

【解决方案1】：

这是您正在寻找的功能的代码

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>

【讨论】：

谢谢，这太完美了！

【解决方案2】：

只需先洗牌。这被称为“Durstenfeld shuffle”。

要回答您是否应该通过 XML 或其他方式提取数据，我会说考虑可能只是制作一个 JSON 文件。在您提取 100 条记录中的 100 条记录之前，您绝对不会遇到性能问题，所以如果您使用如此少量的数据，甚至不必担心性能问题。就个人而言，我通常会保留一个单独的文件，其中包含返回我需要的所有初始数据的函数，或者您可以创建一个 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;
}

【讨论】：

【解决方案3】：

您可以创建一个标志。

var clicked = false;

在 newtechnique 中，您可以检查 clicked 是否为 false。然后让它成真。并且下一次 techdisplay 不会被覆盖。

【讨论】：

单个变量对于一组项目来说是不够的。您需要提供更详细的答案才能有所帮助。

【解决方案4】：

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

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;
}

【讨论】：