为什么我没有看到变量一次递增一个，而只显示 while 循环内的最终结果？JavaScript

Question

我想让它单独显示例如 1 2 3 4 5，而不是仅显示最终结果 5。我真的不知道为什么它会这样显示。我将如何实现，以便它显示它一次递增一个？var pushups = 0;var i = 0;var pushupGoal = 5;function doExercise() {  while (i == 0) {    if (pushups < pushupGoal) {      console.log(pushups);      document.getElementById("pushup1").innerHTML = ++pushups + ' pushups';      if (pushups == pushupGoal) {        document.getElementById("pushup1").innerHTML = pushups + ' pushups. You reached your goal!';        i += 1      }    }  }}<div class="container justify-content-center">  <h1>Pushups</h1>  <h4 id="pushup1">0 pushups</h4>  <button class="btn btn-primary" onClick="doExercise()">Start</button></div>

Answer 1

您的浏览器仅在完成运行循环的任务后才会执行渲染步骤while。因此，只有在while 循环完全完成所有迭代后才会显示结果。相反，您可以setTimeout()每毫秒对多个单独的任务进行排队1000，这将更新您的浏览器 UI。每次任务运行时，您的浏览器都可以重新运行渲染步骤以显示所做的更改。

请参阅下面的示例：

var pushups = 0;

var pushupGoal = 5;

function doExercise() {

  document.getElementById("pushup1").innerHTML = ++pushups + ' pushups';

  if (pushups < pushupGoal) {

    setTimeout(doExercise, 1000);

  } else {

    document.getElementById("pushup1").innerHTML = pushups + ' pushups. You reached your goal!';

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container justify-content-center">

  <h1>Pushups</h1>

  <h4 id="pushup1">0 pushups</h4>

  <button class="btn btn-primary" onclick="doExercise()">Start</button>

</div>