Javascript 字母加扰/冲突脚本的问题
[英]Issues with Javascript letter scrambling / conflicting scripts
问题描述
我对 Javascript 非常陌生，正在编写一个生成随机字符串的小 webapp（用于可视化，不需要完全随机），然后将这些字符串解析为随机选择的给定字符串。
该站点由三个 div 组成，每个 div 生成一个随机字符串。 在页面加载时，div 显示 20 个连字符作为可视占位符。 在每个 div 中，连字符会被一个一个地替换为随机字符。
一旦用户按下按钮，字符就会再次被打乱100 次迭代（数组中的随机字符变为另一个随机字符的 100 次）。 100 次迭代后，从数组中选择一个随机最终值，并将 div 中的随机字符串替换为该选定值。 这种替换一次发生一个字符，替换这些字符的顺序是随机的（例如，可能首先替换第二个字符，然后是最后一个，然后是第一个等）。
每次替换字符时，都应该等待给定的时间才能继续执行（使用 setTimeout）。
这或多或少可以正常工作，但是，最终某些字符仍然是错误的。 有时它有效，有时有一些随机的剩菜。
我注意到了什么：
- 当用最终值替换时等待时间较长时，我的问题就会减少。 另一方面，当等待时间较短时，更多的字符是错误的
- 当 loopRealOutput 迭代时，我似乎重置为 0（使用 Chrome 调试器）
我完全不知道从哪里开始解决这个问题。 我什至无法弄清楚 realOutput 是否一直没有被写入，或者它是否再次被覆盖。 因为带有值的 arrays 被正确提取（我将添加一些 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>
1 个解决方案
解决方案1
0 2021-03-02 11:41:10
我刚刚添加了另一个 setTimeout（在 randomize 中，在调用 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>
冲突的脚本（javascript和jquery）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.