文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript字母置乱/冲突脚本的问题

问Javascript字母置乱/冲突脚本的问题
EN

Stack Overflow用户

提问于 2021-03-02 11:22:16

回答 1查看 26关注 0票数 0

我对Javascript非常陌生，我正在编写一个小型webapp，它生成随机字符串(用于可视化，不需要完全随机)，然后将这些字符串解析为随机选择的给定字符串。

该站点由三个div组成，每个div都生成一个随机字符串。在页面上，div显示20个连字符作为可视占位符。在每个div中，连字符被一个接一个地替换为随机字符。

一旦用户按下按钮，字符就会再次得到置乱的，进行100次迭代(数组中的随机字符被更改为另一个随机字符)。经过100次迭代后，从数组中选择一个随机最终值，并将div中的随机字符串替换为所选值。这种替换一次只发生一个字符，替换这些字符的顺序是随机的(例如，第二个字符可以首先替换，然后是最后一个字符，然后是第一个字符等等)。

每次替换字符时，都需要等待给定的时间才能继续执行(使用setTimeout)。

这或多或少的工作很好，然而，一些字符仍然是错误的。有时起作用，有时有一些随机的剩菜。

我注意到的是：

当

有更大的等待时间时，当替换为最终值时，我的问题就更少了。另一方面，当等待时间较短时，当
迭代时，更多的字符是错误的，我似乎被重置为0(使用Chrome调试器)

我根本不知道从哪里开始解决这个问题。我甚至不知道realOutput是否会一直被写入，或者是否会再次被覆盖。因为具有值的数组被正确地拉出(我将添加一些console.logs来显示)。

所以我的问题是：

是什么导致了这个问题，我如何解决它？

谢谢你的帮助，如果你还需要什么，请告诉我！

const values = {
  form: ["Value 1", "Value 2", "Value 3"],
  modus: ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6"],
  inhalt: [
    "Input-1",
    "Input-2",
    "Input-3",
    "Input-4",
    "Input-5",
    "Input-6",
  ],
};

const placeholderLength = 20;
let valueForm = [],
  valueModus = [],
  valueInhalt = [],
  placeholder = [];

const outputForm = document.getElementById("outputForm");
const outputModus = document.getElementById("outputModus");
const outputInhalt = document.getElementById("outputInhalt");

const randomCharacter = () => {
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ";

  return characters.charAt(Math.floor(Math.random() * characters.length));
};

const randomNumber = (max) => {
  return Math.floor(Math.random() * max);
};

const initialValues = (value, destination) => {
  let i = 0;
  const loop = () => {
    setTimeout(() => {
      value[i] = randomCharacter();
      let valueJoined = value.join("");
      destination.innerHTML = valueJoined;
      i++;
      if (i < placeholderLength) {
        loop();
      } else {}
    }, 100);
  };
  loop();
};

const main = () => {
  for (let i = 0; i < placeholderLength; i++) {
    placeholder.push("-");
  }
  valueForm = placeholder.slice();
  valueModus = placeholder.slice();
  valueInhalt = placeholder.slice();

  initialValues(valueForm, outputForm);
  initialValues(valueModus, outputModus);
  initialValues(valueInhalt, outputInhalt);

};
const scramble = (value, destination, i) => {
  setTimeout(() => {
    value[i] = randomCharacter();
    let valueJoined = value.join("");
    destination.innerHTML = valueJoined;
  }, 100);
};

const shuffledArray = (len) => {
  let shuffledArray = [];
  let val = 0;
  while (shuffledArray.length < len) {
    shuffledArray.push(val);
    val++;
  }

  return shuffledArray.sort(() => 0.5 - Math.random());
};
const realOutput = (value, output, valueList) => {
  const realText = valueList[randomNumber(valueList.length)];
  console.log(realText);
  const realArray = Array.from(realText);
  while (realArray.length < 20) {
    realArray.push("-");
  }
  let orderArray = shuffledArray(realArray.length);

  let i = 0;
  const loopRealOutput = () => {
    setTimeout(() => {
      value[orderArray[i]] = realArray[orderArray[i]];
      let valueJoined = value.join("");
      output.innerHTML = valueJoined;
      i++;
      if (i < value.length) {
        loopRealOutput();
      } else {}
    }, 20);
  };
  loopRealOutput();
};

//------------------------------------------
// THIS GETS CALLED WHEN PRESSING THE BUTTON
//------------------------------------------
const randomize = () => {
  let counter = 0;
  const iterations = 200;

  const loop = () => {
    setTimeout(() => {
      scramble(valueForm, outputForm, randomNumber(valueForm.length));
      scramble(valueModus, outputModus, randomNumber(valueModus.length));
      scramble(valueInhalt, outputInhalt, randomNumber(valueInhalt.length));
      counter++;
      if (counter < iterations) {
        loop();
      } else {
        realOutput(valueForm, outputForm, values.form);
        realOutput(valueModus, outputModus, values.modus);
        realOutput(valueInhalt, outputInhalt, values.inhalt);
        return;
      }
    }, 5);
  };
  loop();
};

main();

body {}

.output {
  font-family: monospace;
  letter-spacing: 1px;
  font-size: 1.5em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="main.css" />
  <title>Document</title>
</head>

<body>
  <div class="flex-container"></div>
  <h2>Value 1</h2>
  <div id="outputForm" class="output"></div>
  <h2>Value 2</h2>
  <div id="outputModus" class="output"></div>
  <h2>Value 3</h2>
  <div id="outputInhalt" class="output"></div>
  <!-- <div>placeholder</div> -->
  <button onclick="randomize()">Button</button>
</body>
<script src="app.js"></script>

</html>

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-02 11:41:10

我刚刚添加了另一个setTimeout (在随机化内部，在调用realOutput之前暂停)，它确实解决了这个问题。然而-这似乎真的是一个解决办法，如果有人对如何实际解决这个问题有想法，你的投入将是非常感谢的！

const values = {
  form: ["Value 1", "Value 2", "Value 3"],
  modus: ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6"],
  inhalt: [
    "Input-1",
    "Input-2",
    "Input-3",
    "Input-4",
    "Input-5",
    "Input-6",
  ],
};

const placeholderLength = 20;
let valueForm = [],
  valueModus = [],
  valueInhalt = [],
  placeholder = [];

const outputForm = document.getElementById("outputForm");
const outputModus = document.getElementById("outputModus");
const outputInhalt = document.getElementById("outputInhalt");

const randomCharacter = () => {
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ";

  return characters.charAt(Math.floor(Math.random() * characters.length));
};

const randomNumber = (max) => {
  return Math.floor(Math.random() * max);
};

const initialValues = (value, destination) => {
  let i = 0;
  const loop = () => {
    setTimeout(() => {
      value[i] = randomCharacter();
      let valueJoined = value.join("");
      destination.innerHTML = valueJoined;
      i++;
      if (i < placeholderLength) {
        loop();
      } else {}
    }, 100);
  };
  loop();
};

const main = () => {
  for (let i = 0; i < placeholderLength; i++) {
    placeholder.push("-");
  }
  valueForm = placeholder.slice();
  valueModus = placeholder.slice();
  valueInhalt = placeholder.slice();

  initialValues(valueForm, outputForm);
  initialValues(valueModus, outputModus);
  initialValues(valueInhalt, outputInhalt);

};
const scramble = (value, destination, i) => {
  setTimeout(() => {
    value[i] = randomCharacter();
    let valueJoined = value.join("");
    destination.innerHTML = valueJoined;
  }, 100);
};

const shuffledArray = (len) => {
  let shuffledArray = [];
  let val = 0;
  while (shuffledArray.length < len) {
    shuffledArray.push(val);
    val++;
  }

  return shuffledArray.sort(() => 0.5 - Math.random());
};
const realOutput = (value, output, valueList) => {
  const realText = valueList[randomNumber(valueList.length)];
  console.log(realText);
  const realArray = Array.from(realText);
  while (realArray.length < 20) {
    realArray.push("-");
  }
  let orderArray = shuffledArray(realArray.length);

  let i = 0;
  const loopRealOutput = () => {
    setTimeout(() => {
      value[orderArray[i]] = realArray[orderArray[i]];
      let valueJoined = value.join("");
      output.innerHTML = valueJoined;
      i++;
      if (i < value.length) {
        loopRealOutput();
      } else {}
    }, 20);
  };
  loopRealOutput();
};

//------------------------------------------
// THIS GETS CALLED WHEN PRESSING THE BUTTON
//------------------------------------------
const randomize = () => {
  let counter = 0;
  const iterations = 200;

  const loop = () => {
    setTimeout(() => {
      scramble(valueForm, outputForm, randomNumber(valueForm.length));
      scramble(valueModus, outputModus, randomNumber(valueModus.length));
      scramble(valueInhalt, outputInhalt, randomNumber(valueInhalt.length));
      counter++;
      if (counter < iterations) {
        loop();
      } else {
        setTimeout(() => {
          realOutput(valueForm, outputForm, values.form);
          realOutput(valueModus, outputModus, values.modus);
          realOutput(valueInhalt, outputInhalt, values.inhalt);
          return;
        }, 100);
      }
    }, 5);
  };
  loop();
};

main();

body {}

.output {
  font-family: monospace;
  letter-spacing: 1px;
  font-size: 1.5em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="main.css" />
  <title>Document</title>
</head>

<body>
  <div class="flex-container"></div>
  <h2>Value 1</h2>
  <div id="outputForm" class="output"></div>
  <h2>Value 2</h2>
  <div id="outputModus" class="output"></div>
  <h2>Value 3</h2>
  <div id="outputInhalt" class="output"></div>
  <!-- <div>placeholder</div> -->
  <button onclick="randomize()">Button</button>
</body>
<script src="app.js"></script>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66438395

复制

相似问题

问Javascript字母置乱/冲突脚本的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript字母置乱/冲突脚本的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript字母置乱/冲突脚本的问题
EN