gpt4 book ai didi

javascript - 我可以使用 setTimeout 直观地显示 while 循环如何运行吗?

转载 作者:行者123 更新时间:2023-11-28 03:05:03 25 4
gpt4 key购买 nike

我有一个简单的函数,它接受目标值 (3) 并生成 1 到 6 之间的随机数,直到目标匹配为止。我想创建一种视觉效果,我可以在页面上看到每个随机生成的数字,直到目标匹配为止。每次迭代时,我将随机生成的数字分配给 p 标记的innerHTML,并且当我使用浏览器开发工具单步执行该函数时,可以看到这种情况发生。但是,当我如下所示使用 setTimeout 并运行该函数时,不会发生延迟并且目标值立即显示。有没有办法可以延迟 while 循环的每次迭代,以便我可以在屏幕上看到随机生成的数字?

<body>
<p id="output"></p>
<button onclick="myFunction()">Go</button>

<script>
function myFunction()
{
var value = 0;
var target = 3;

while (value != target)
{
value = Math.floor((Math.random() * 6) + 1);
setTimeout(writeOutput(value), 200);
}
}

function writeOutput(value)
{
document.getElementById("output").innerHTML = value;
}
</script>
</body>

最佳答案

使用async/await使这变得非常简单。当您在 while 循环内使用 await 时,循环会暂停,直到 promise 解决。

在这里,我创建了一个 sleep 函数,它返回一个在给定毫秒数后解析的 promise 。循环将暂停那么多毫秒,然后再恢复。

此处介绍async/await:https://javascript.info/async-await

async function myFunction() 
{
var value = 0;
var target = 3;

while (value != target)
{
value = Math.floor((Math.random() * 6) + 1);
writeOutput(value)
await sleep(500)
}
}

function writeOutput(value)
{
document.getElementById("output").innerHTML = value;
}

function sleep(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms)
})
}
<p id="output"></p>
<button onclick="myFunction()">Go</button>

关于javascript - 我可以使用 setTimeout 直观地显示 while 循环如何运行吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60685521/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com