javascript - Canvas 绘制图像被下面的代码遮挡

Question

嗨，我有以下功能

render = function ( ctx, img, W, H ) {
  ctx.drawImage(img, 0, 0, W, H, 0, 0, W, H);
}

我正在从另一个函数调用该函数

renderImage(ctx, img, width, height);
for(var i = 0; i < 10000000 ; i++) {
    // en expensive for loop
}            

我面临的问题是，在 for 循环执行完毕之前，图像不会在浏览器中加载，但是尚不清楚为什么图像要等到 for 循环完成后才加载。有人可以帮忙吗？如何在不等待循环执行完成的情况下加载它？

Answer 1

JavaScript 是单线程的，因此在循环运行时会阻止浏览器更新屏幕。

要解决这个问题，请使用延迟给浏览器喘息的时间。这当然会使代码异步运行，因此可能需要回调机制，具体取决于代码的下一步 Action 。

示例:

renderImage(ctx, img, width, height);

setTimeout(function() {
  for(var i = 0; i < 10000000 ; i++) {
    // en expensive for loop
  }
  // call next step
}, 9);   // delay some arbitrary ms

如果循环长时间运行，您可以考虑将其分成几个部分或使用 WebWorker。

有关如何拆分循环的信息，请参阅以下答案:

• Why is this for loop blocking if it is called afterwards?
• Converting Uint8Array crashing browser for large files

额外提示:您不必使用裁剪参数来绘制调整大小的图像，只需提供宽度和高度:

ctx.drawImage(img, 0, 0, W, H);