“For”循环中的代码如何/何时执行？ Javascript答案

【问题标题】：How / When does code in a "For" loop get executed? Javascript“For”循环中的代码如何/何时执行？ Javascript
【发布时间】：2016-08-24 06:47:38
【问题描述】：

在我的示例代码中，我将两个单独的文本打印到 Canvas 元素。两者都从一个函数内部调用打印。在函数内部，我有一个 for 循环，在指定的时间内，它应该清除 Canvas 并打印第一个文本。一旦 for 循环结束，它应该打印第二个文本。然后 setInterval 再次调用该函数以完全清除 Canvas 并在 for 循环期间仅打印第一个文本，在循环结束时打印第二个文本。但是第二个文本与第一个文本同时打印，并且永远不会被清除。所以看起来 for 循环中的代码在 for 循环结束之前不会执行。但是我还在for循环内部和外部设置了console.logs，for循环内部的控制台日志实时执行，而不是在for循环结束时执行。那么在这种情况下，console.log 是不是一种特殊情况……但 for 循环中的其他函数调用必须等到结束才能执行？注意：由于 setInterval，在 sn-p 运行 3 秒后文本才会显示。然后 sn-p 页面往往会滞后，我认为，因为 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);

&lt;canvas id="canvas" width="800" height="600" style="border: 1px solid black"&gt;&lt;/canvas&gt;

【问题讨论】：

我在一个问题中看到的最长文本，尝试在你的问题中添加段落：for循环内的PCode在循环期间执行，例如：否则将永远不会工作。
在事件退出之前画布不会更新，IE 在 for 循环和 for 循环之后的代码之后。例如，如果您使该循环成为无限循环，则不会发生任何事情，因为事件循环无法运行将画布重新绘制到屏幕上的代码
for (; Date.now() < beginTime + 1500;) 很多很多倍，比你想象的要多
stackoverflow.com/questions/4982631/… for 循环中的代码确实会执行，但浏览器必须等到 for 循环完成才能调用它的 redraw 方法，因为它的 JavaScript 引擎是单线程的。如果有类似 canvas.update 的东西，你可以把它放在 for 循环中。或者在for循环中添加一个setTimeout for 1ms，让浏览器有1ms的时间重绘，或者使用setInterval。
@seahorsepip 是的，谢谢。我想我现在明白了。将尝试使用 setTimeout 1 毫秒。

标签： javascript loops canvas

【解决方案1】：

clearRect() 和drawText() 等函数只是在浏览器有机会时请求执行该操作。但是，直到 for 循环完成执行之后，这个机会才会出现。当浏览器终于有机会更新画布时，它会一次性处理所有请求。这意味着您只会看到最后的消息。

【讨论】：

嗯，for循环中调用的所有东西都会在for循环中执行，否则你不能根据函数调用的结果来破坏它。画布操作没有延迟，它在 js 流程中同步完成。没有像 DOM 操作那样的重绘延迟，因为它是独立的，并且一切都在画布的行像素上完成。