为什么我没有看到变量一次递增一个，而只显示 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>