javascript循環的每次迭代中，如何顯示每個隨機數的結果？

Question

我嘗試使用 setIntervar 它只顯示每個完成的 for 循環而不是每次迭代。 我必須看到拋出的三個數字，例如，在第一次迭代中，並將它們顯示在各自的容器中，依此類推，直到達到 20。

 function generateNumber() { /* console.count(); */ count = 0; for (var i = 0; i <= 20; i++) { let n = document.getElementById("demo").innerHTML = Math.floor(Math.random() * 5); let n1 = document.getElementById("demo1").innerHTML = Math.floor(Math.random() * 5); let n2 = document.getElementById("demo2").innerHTML = Math.floor(Math.random() * 5); if (n === n1 && n1 === n2) { count++; let audio = new Audio( "media/008868268_prev.mp3" ); audio.play(); } else if (n === n1 || n1 === n2 || n === n2 || n2 === n1 || n1 === n) { count++; } document.getElementById("coinci").innerHTML = count; } }

 <div class="num"> <div id="demo"></div> <div id="demo1"></div> <div id="demo2"></div> <div id="coinci"></div> </div> <div class="btn"> <button type="button" onclick="generateNumber()">Generar</button> </div>

Answer 1

如果你想延遲 for 循環的迭代，你可以使用異步函數。 這是一個簡單的解決方法。 我定義了一個 promise，它將在 100 毫秒后使用setTimeout解析，並且在每次迭代中它await promise 的響應。

 let myDelay = () => new Promise((resolve, reject) => { setTimeout(function () { resolve('delayed') }, 100) }) let audio = new Audio( "media/008868268_prev.mp3" ); async function generateNumber() { count = 0; for (var i = 0; i <= 20; i++) { let delay = await myDelay() let n = document.getElementById("demo").innerHTML = Math.floor(Math.random() * 5); let n1 = document.getElementById("demo1").innerHTML = Math.floor(Math.random() * 5); let n2 = document.getElementById("demo2").innerHTML = Math.floor(Math.random() * 5); if (n === n1 && n1 === n2) { count++; audio.play(); } else if (n === n1 || n1 === n2 || n === n2 || n2 === n1 || n1 === n) { count++; } document.getElementById("coinci").innerHTML = count; } }

 <div class="num"> <div id="demo"></div> <div id="demo1"></div> <div id="demo2"></div> <div id="coinci"></div> </div> <div class="btn"> <button type="button" onclick="generateNumber()">Generar</button> </div>