Javascript 我可以使用setTimeout直观地显示while循环是如何运行的吗？_Javascript

Javascript 我可以使用setTimeout直观地显示while循环是如何运行的吗？

javascript

Javascript 我可以使用setTimeout直观地显示while循环是如何运行的吗？,javascript,Javascript,我有一个简单的函数，它接受一个目标值（3），并生成一个从1到6的随机数，直到目标匹配为止。我想创建一个视觉效果，在那里我可以看到页面上每个随机生成的数字，直到目标匹配为止。每次迭代，我都会将随机生成的数字分配给p标记的innerHTML，当我使用浏览器开发工具逐步完成函数时，就会看到这种情况。但是，当我使用如下所示的setTimeout并运行该函数时，不会发生延迟，目标值会立即显示。是否有一种方法可以延迟while循环的每次迭代，以便在屏幕上看到随机生成的数字 <body> &l

我有一个简单的函数，它接受一个目标值（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>



去
函数myFunction（）
{
var值=0；
var目标=3；
while（值！=目标）
{
值=数学地板（（数学随机（）*6）+1）；
setTimeout（writeOutput（值），200）；
}
}
函数writeOutput（值）
{
document.getElementById（“输出”）.innerHTML=value；
}

使用

async

await

使这变得非常简单。在while循环中使用

wait

时，循环将暂停，直到承诺得到解决

在这里，我创建了一个

sleep

函数，它返回一个承诺，在给定的毫秒数之后解析。循环将在恢复之前暂停那么多毫秒

async

wait

简介如下：

异步函数myFunction（） { var值=0； var目标=3； while（值！=目标） { 值=数学地板（（数学随机（）*6）+1）；写输出（值）等待睡眠（500） } } 函数writeOutput（值） { document.getElementById（“输出”）.innerHTML=value； } 功能睡眠（ms）{ 返回新承诺（（解决）=>{ 设置超时（解析，毫秒） }) }


使用async
/wait
可以轻松地执行。在while循环中使用wait
时，循环将暂停，直到承诺得到解决
在这里，我创建了一个sleep
函数，它返回一个承诺，在给定的毫秒数之后解析。循环将在恢复之前暂停那么多毫秒
async
/wait
简介如下：

异步函数myFunction（）
{
var值=0；
var目标=3；
while（值！=目标）
{
值=数学地板（（数学随机（）*6）+1）；
写输出（值）
等待睡眠（500）
}
}
函数writeOutput（值）
{
document.getElementById（“输出”）.innerHTML=value；
}
功能睡眠（ms）{
返回新承诺（（解决）=>{
设置超时（解析，毫秒）
})
}

Go

setTimeout

立即返回，因此应该从父级内部调用它。像这样的

函数myFunction（）{
var目标=3；
var out=document.getElementById（“输出”）；
函数checkResult（）{
var值=数学地板（（数学随机（）*6）+1）；
写输出（值）；
如果（值！==目标）
设置超时（检查结果，200）；
}
函数writeOutput（值）{
out.innerHTML=值；
}
设置超时（检查结果，200）；
}

Go

setTimeout

立即返回，因此应该从父级内部调用它。像这样的

函数myFunction（）{
var目标=3；
var out=document.getElementById（“输出”）；
函数checkResult（）{
var值=数学地板（（数学随机（）*6）+1）；
写输出（值）；
如果（值！==目标）
设置超时（检查结果，200）；
}
函数writeOutput（值）{
out.innerHTML=值；
}
设置超时（检查结果，200）；
}

去

最简单的方法可能是。。。不要在循环中执行此操作，只需检查一次值，如果失败，则重新设置超时以执行整个功能。不过我猜这有点违背你的目的。是的，很明显，现在你可以在JS中睡觉了，看这里-

函数writeOutput（值）
{
document.getElementById（“输出”）.innerHTML=value；
}
函数myFunction（）
{
var值=数学地板（（数学随机（）*6）+1）；
var目标=3；
写输出（值）；
如果（值！=目标）
设置超时（myFunction，200）；
}

去

函数writeOutput（值）
{
document.getElementById（“输出”）.innerHTML=value；
}
函数myFunction（）
{
var值=数学地板（（数学随机（）*6）+1）；
var目标=3；
写输出（值）；
如果（值！=目标）
设置超时（myFunction，200）；
}


转到