javascript - 合并图像时出现间歇性结果

Question

我在将事件代码与程序代码一起使用时遇到很多麻烦。我有一个合并图像的函数，它每秒被调用 20-40 次。有时有效，有时无效。有时 drawImage 在图像加载之前被调用，有时则不然。这是代码(它是类的方法):

merge(image, pos) {
  if (!pos && !image.pos)
    pos = [0, 0];
  else if (!pos)
    pos = image.pos;

  canvas.element[3].width = this.width;
  canvas.element[4].width = this.width;
  canvas.element[3].height = this.height;
  canvas.element[4].height = this.height;

  canvas.ctx[3].putImageData(this.toImageData(), ...this.pos);
  var image1 = new Image(this.width, this.height);
  image1.onload = function() {/*help pls*/};
  image1.src = canvas.element[3].toDataURL();
  canvas.ctx[4].drawImage(image1, 0, 0);

  canvas.ctx[3].clearRect(0,0,this.width,this.height);

  canvas.ctx[3].putImageData(image.toImageData(), ...pos);
  image1 = new Image(this.width, this.height);
  image1.onload = function() {/*help pls*/};
  image1.src = canvas.element[3].toDataURL();
  canvas.ctx[4].drawImage(image1, 0, 0);

  this.data.set(new Uint32Array(canvas.ctx[4].getImageData(0,0,this.width,this.height).data.buffer));
  return this;
}

我知道我必须在onload事件中写一些东西。我感觉我已经尝试了一切。我希望函数对于调用者来说“看起来”是程序性的。这个函数将被调用，它会做它的事情并返回结果。我不想输入回调并将所有简单的过程代码转换为事件代码。

我尝试使用 while 循环来“等待”onload 事件触发，但这不起作用(我讨厌 while 循环!)。它所做的只是崩溃!我尝试将接下来的所有内容放入 onload 事件中，但我无法在 this 被更改后立即返回它。

我想我在某处读到可以使用递归循环。我依稀记得arguments.callee。但我不知道如何实现这个。

Answer 1

“Javascript 是顺序的”

在 javascript 中编写事件驱动代码时需要了解的重要一点是 javascript 中的代码执行是严格顺序的。一次一个函数，一次一个指令。您无法中断 javascript 的执行。

当你写下类似的内容时

function doSomething(){
     var img = new Image();
     img.onload = function(){ // do stuff }; // This can not run until
                                             // your current call is over.
     img.src = "foo.img";
     // lots more code..
     ...
     ...
     ...
     // end of the function
}

//code
doSomething();
// more code.

console.log("Have a nice day"); // last line

// at this point there is no more code
// so javascript returns 
// then it checks if there is anything on the call stack.
// It is only now that onload can run.

当您调用doSomething时该函数将阻止所有其他 javascript。您可以调用函数，但在退出之前不会执行任何异步事件 doSomething .

这意味着 onload事件必须等到doSomething函数已返回。更准确地说，该调用是空的(不再返回)，因此如果您以 foo() 开头调用bar() ，调用 baf() 。直到foo()已返回，并且其下面的所有代码均已完成，任何其他代码都可以运行。

图像加载是异步的，它是在单独的线程上加载的。当它完成加载时，它不会调用函数 onload ，而是将调用放在调用堆栈上。只有一个调用堆栈， native 异步调用(例如图像加载、超时、间隔等)对其进行的调用顺序取决于异步完成的时间。

代码中发生的情况是，您创建的图像将被您分配原始图像变量的新图像替换。由于没有对原始图像的引用，并且在您退出之前加载不会发生，因此 JavaScript 假定您不再需要第一个图像并将其转储。

有多种方法可以解决该问题。一是确保维护对每个新图像的引用。您可以使用image.addEventListener("load", function(){ //your image is "this'});来做到这一点这将保留对原始图像的引用，因为事件监听器与图像分开存储，这与 image.onload = function(){} 不同。当您将新图像分配给该变量时，它会与图像一起丢失。

另一种方法是使用闭包来保存对图像的引用。

function doSomething(){
    var img;   

    // when the following function is call the argument
    // image is closed over. This means that it keeps an unique 
    // reference to image every time this function is call.
    // this means that the image is not replaced below
    function addEvent(image){  
        image.onload = function(){}
    }

    img = new Image()
    img.src = "blah.img"
    addEvent(img);  // use function closure to close over the image
                    // thereby maintaining a separate reference to the img

    img = new Image(); // replace the previous image with new
    img.src = "blah1.img"; // because the addEvent function has closed over
                           // the previous img and is holding a separate reference
                           // the image will not be dumped
    addEvent(img); // clos over this one making a second reference via closure

}

doSomething();
// not until completely exited that the onload functions can be removed from the
// call stack and executed.

最简单的方法是自己创建单独的引用。

var imageArray = [];
function doSomething(){
    img = new Image()
    img.src = "blah.img"
    img.onload = function(){};
    imageArray.push(img);  // copy the image reference to the array.

    img = new Image();  // create a new image but the previous one
    img.src = "blah.img"  // is still referenced and thus wont be lost.
    img.onload = function(){};
    imageArray.push(img);  // copy the image reference to the array.
}

这样做可能有助于您更清楚地理解它，但是所有三种方法都做同样的事情。他们创建对图像的单独引用，为每个图像存储图像引用的副本。允许图像存在，直到当前执行返回并且可以触发 onload 事件。

使用数组当然会用图像填充内存，除非您从数组中删除图像引用。但这是另一个故事了。

希望这能解释您的代码出了什么问题，并为您提供修改代码所需的信息，并继续编码的有趣部分，而不是令人沮丧的部分。