如何使用 while 循环在控制台记录一个项目和另一个项目之间产生延迟？答案

【问题标题】：How can I use a while loop to generate a delay between console logging one item and another item?如何使用 while 循环在控制台记录一个项目和另一个项目之间产生延迟？
【发布时间】：2017-12-19 10:54:07
【问题描述】：

我有以下代码，但它似乎不起作用。我想登录到控制台“深绿色”，让它等待几毫秒，然后登录“浅绿色”，所有这些都不使用 setInterval 或 setTimeout。这可以用 javascript 实现吗？

function logGreen() {
 console.log("dark-green");
 wait(200);
 console.log("light-green");
}

function wait(ms) {
  var time = new Date();
  var milliseconds = time.getMilliseconds();
  var startTime = milliseconds;
  var currentTime = milliseconds;
  while(currentTime - startTime < ms) {
 currentTime = milliseconds;
 }
}

我遇到的问题是循环破坏了浏览器，可以这么说，我不知道如何解决这个问题。有没有办法用 for 循环做到这一点？

【问题讨论】：

没有setInterval?没有setTimeout？你可以使用requestAnimationFrame吗？
“破坏浏览器”是什么意思？
window.setInterval 是一种更好的方法

标签： javascript html

【解决方案1】：

您的代码的问题是您的 while 循环中 currentTime 的值没有正确更新。

while 循环中的代码将无限期执行（无限循环）导致堆栈溢出 - 我假设这就是您所说的“破坏浏览器”的意思。这是因为您的条件始终为真：startTime 和 currentTime 是相同的值 (currentTime - startTime < 200)

试试这个：

 while(currentTime - startTime < ms) {
   time = new Date();
   currentTime = time.getTime();
 }

创建一个新的 Date 对象并在循环内调用 time.getTime() 将返回最新时间，应该可以解决您的问题。使用getTime() 而不是getMilliseconds()，因为后者只返回0 到999 之间的数字（即不到一秒）。这个有限的上限会对您的代码造成问题，因为 getMilliseconds() 只会返回自上一秒以来经过的毫秒数。

【讨论】：

我认为您正确诊断了问题，但没有：调用getMilliseconds() 不会返回最新时间。
@Bergi 已更正。
另外，OP 不能使用getMilliseconds，而应使用getTime，否则如果等待期超过第二个边界，这将失败。
@Bergi 我在这里学到的和 OP 一样多。是的，使用getTime，因为getMilliseconds 只返回0 到999 之间的数字。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
在这里操作。非常感谢，这有效。我遇到了一个新问题，我想应用相同的逻辑，但不是将“深绿色”和“浅绿色”记录到控制台，而是想更改 div 的背景颜色。我在这里转发了这个问题：并且想知道是否有人对我如何实现这一点有一些意见。

【解决方案2】：

您可以将生成器作为惰性评估。请看下面的例子。运行无限循环 setInterval。您可以根据自己的使用情况修改代码。

这在支持 es6 的浏览器和节点 8.9.1LTS 或更高版本上受支持。

function* asyncRandomNumbers() {
  let tm = new Date().getTime();
  while (true) {
    let updatedTm = new Date().getTime()
    if(updatedTm - tm >= 1000){
      tm = updatedTm;
      yield tm;
    }
  }
}
for (var val of asyncRandomNumbers()) {
  console.log(val) // outputs 0 — 9
}

【讨论】：