时间戳

首页 > 解决方案 > 我可以使用 setTimeout 直观地显示 while 循环是如何运行的吗？

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

问题描述

我有一个简单的函数，它采用目标值 (3) 并生成一个从 1 到 6 的随机数，直到目标匹配。我想创建一个视觉效果，我可以在页面上看到每个随机生成的数字，直到目标匹配。我将随机生成的数字分配给每次迭代的 ap 标记的 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>

标签： javascript

解决方案

使用async/await使这很容易。当您await在 while 循环中使用时，循环会暂停，直到 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>

推荐阅读