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.