Question

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 1

clearRect()和drawText()等功能只是浏览器有机会时执行操作的请求。但是，直到for循环完成后才有机会到来。当浏览器最终有机会更新画布时，它将立即处理所有请求。这意味着您只能看到最终消息。

如何/何时代码在＆＃34; For＆＃34;循环执行？ JavaScript的

1 个答案: