javascript - "For"循环中的代码如何/何时执行？ JavaScript

Question

在我的示例代码中，我将两个单独的文本打印到 Canvas 元素。两者都从一个函数内部调用打印。在函数内部，我有一个 for 循环，在指定的时间内，它应该清除 Canvas 并打印第一个文本。一旦 for 循环结束，它应该打印第二个文本。然后 setInterval 再次调用该函数以完全清除 Canvas 并仅打印 for 循环期间的第一个文本和循环结束时的第二个文本。但第二个文本与第一个文本同时打印，并且永远不会被清除。因此，看起来 for 循环中的代码直到 for 循环结束才执行。但我还在 for 循环内部和外部设置了 console.logs，并且 for 循环内部的控制台日志实时执行，而不是在 for 循环结束时执行。那么console.log在这种情况下是一个特例吗……但for循环内的其他函数调用必须等到结束才能执行？注意:由于 setInterval，文本在代码片段运行后 3 秒后才会显示。我认为，然后片段页面往往会滞后，因为 for 循环运行 1.5 秒。现在才注意到这一点，因为它没有在我的文本编辑器中执行此操作。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function drawText(text, x, y, color, size) {
  ctx.font = size + 'px sans-serif';
  ctx.fillStyle = color;
  ctx.fillText(text, x, y);
}

function test() {
  var beginTime = Date.now();

  for (; Date.now() < beginTime + 1500;) {

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawText('Clear canvas and only show this', 100, 100, 'black', '20');

   // console.log('for loop ran');
  }

  drawText('Dont display this till for-loop stops clearing canvas', 100, 200, 'red', '20');

  // console.log('for loop finished');
}

setInterval(test, 3000);

<canvas id="canvas" width="800" height="600" style="border: 1px solid black"></canvas>

Answer 1

诸如clearRect()和drawText()之类的函数只是浏览器有机会时立即执行操作的请求。然而，直到 for 循环执行完毕之后，这个机会才会到来。当浏览器最终有机会更新 Canvas 时，它将立即处理所有请求。这意味着您只会看到最终消息。