javascript - 事后如何调用回调？

Question

在下面的代码中，我不明白为什么两个回调函数都被调用。 callback01 有意义，因为它位于调用加载之前的回调数组中。另一方面，callback02 直到调用加载之后才将其放入数组中，但控制台显示它正在被调用。

var callbacks = [];

function addCallback(func) {
  callbacks.push(func);
}

function load(img_url) {
  var img = new Image();
  img.onload = function() {
    console.log('loaded.');
    callbacks.forEach(function(func) { func(); } )
  };
  img.src = img_url;
}

addCallback(function() { console.log('callback01'); });
load('img/image01.png');
addCallback(function() { console.log('callback02'); });

Answer 1

这两个回调都会触发，因为回调会在图像加载后触发。加载图像需要几毫秒，这对于代码加载和添加两个回调来说有足够的时间。

大概这就是浏览器执行代码的方式:

// 1 - add first callback
addCallback(function() { console.log('callback01'); });

// 2 - tell JS to begin loading
load('img/image01.png');

// 3 - add second callback
addCallback(function() { console.log('callback02'); });

// 4 - image loads in the background
// 5 - the img.onload function fires and invokes each callback
// 5.a - callback 1 fires
// 5.b - callback 2 fires